input-Basic Components-JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)-JavaScript Components-ArkUI-Application Framework

Child Components

Not supported.

Attributes

Expand

Name	Type	Default Value	Mandatory	Description
type	string	button	No	Type of the component, which cannot be dynamically modified. The options are as follows: - button: a button that can be clicked. - checkbox: a check box. - radio: a radio button that allows users to select one from multiple others with the same name. - text: a text box for text input. The text input screen can only be started on real devices that support input methods. It cannot be started on UI preview.
checked	boolean	false	No	Whether the component is selected. true: selected; false: not selected. This attribute is valid only when type is set to checkbox or radio.
name	string	-	No	Name of the <input> component.
value	string	-	No	Value of the <input> component. When type is radio, this attribute is mandatory and the value must be unique for radio buttons with the same name.
id	string	-	No	Unique ID of the component.
style	string	-	No	Style declaration of the component.
class	string	-	No	Style class of the component, which is used to refer to a style table.
ref	string	-	No	Reference information of child elements, which is registered with the parent component on $refs.

Events

When type is set to checkbox or radio, the following events are supported.

Expand

Name	Parameter	Description
change	{ checked:true \| false }	Triggered when the checked status of the checkbox or radio button changes.
click	-	Triggered when the component is clicked.
longpress	-	Triggered when the component is long pressed.
swipe⁵⁺	SwipeEvent	Event object triggered when a user quickly swipes on a component.

When type is set to button, the following events are supported.

Expand

Name	Parameter	Description
click	-	Triggered when the component is clicked.
longpress	-	Triggered when the component is long pressed.
swipe⁵⁺	SwipeEvent	Event object triggered when a user quickly swipes on a component.

Styles

Expand

Name	Type	Default Value	Mandatory	Description
color	<color>	#ffffff	No	Text color of the button.
font-size	<length>	30px	No	Font size of the button.
width	<length>	-	No	The default value is 100px when type is set to button.
height	<length>	-	No	The default value is 50px when type is set to button.
font-family	string	SourceHanSansSC-Regular	No	Font. Only the SourceHanSansSC-Regular font is supported.
padding	<length>	0	No	Shorthand attribute to set the padding for all sides. The attribute can have one to four values: - If you set only one value, it specifies the padding for all the four sides. - If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding. - If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding. - If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
padding-[left\|top\|right\|bottom]	<length>	0	No	Left, top, right, and bottom padding.
margin	<length> \| <percentage>⁵⁺	0	No	Shorthand attribute to set the margin for all sides. The attribute can have one to four values: - If you set only one value, it specifies the margin for all the four sides. - If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins. - If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin. - If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).
margin-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	No	Left, top, right, and bottom margins.
border-width	<length>	0	No	Shorthand attribute to set the border width for all sides.
border-color	<color>	black	No	Shorthand attribute to set the color for all borders.
border-radius	<length>	-	No	Radius of border corners.
background-color	<color>	-	No	Background color.
display	string	flex	No	Whether to display a box containing the element and the layout for its child elements. Available values are as follows: - flex: flexible layout - none: not rendered
[left\|top]	<length> \| <percentage>⁶⁺	-	No	Edge of the element. - The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block. - The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.

Example

Common button

Collapse
Word wrap
Dark theme
Copy code
<!-- xxx.hml -->
<div class="div-button">
  <input class="button" type="button" value="Input-Button"></input>
</div>

Collapse
Word wrap
Dark theme
Copy code
/* xxx.css */
.div-button {
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.button {
  margin-top: 30px;
  width: 280px;
}

Check box

Collapse
Word wrap
Dark theme
Copy code
<!-- xxx.hml -->
<div class="content">
  <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
  <text class="text">{{text}}</text>
</div>

Collapse
Word wrap
Dark theme
Copy code
/* xxx.css */
.content{
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.text{
  font-size: 30px;
  text-align: center;
  width: 200px;
  margin-top: 20px;
  height: 100px;
}

Collapse
Word wrap
Dark theme
Copy code
// xxx.js
export default {
  data: {
    text: "text"
  },
  checkboxOnChange(e) {
    this.text = e.checked;
  }
}

Radio button

Collapse
Word wrap
Dark theme
Copy code
<!-- xxx.hml -->
<div class="container">
  <div class="item">
    <input type="radio" checked="true" name="radioSample" value="radio1" onchange="onRadioChange"></input>
    <text class="text">radio1</text>
  </div>
  <div class="item">
    <input type="radio" checked="false" name="radioSample" value="radio2" onchange="onRadioChange"></input>
    <text class="text">radio2</text>
  </div>
  <div class="item">
    <input type="radio" checked="false" name="radioSample" value="radio3" onchange="onRadioChange"></input>
    <text class="text">radio3</text>
  </div>
</div>

Collapse
Word wrap
Dark theme
Copy code
/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item {
  width: 50%;
  height: 30%;
  justify-content: center;
}
.text {
  margin-top: 25%;
  font-size: 30px;
  text-align: center;
  width: 200px;
  height: 100px;
}