1# input 2 3The **\<input>** component provides an interactive interface to receive user input. It can be a radio button, check box, or button. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17| Name| Type| Default Value| Mandatory| Description| 18| -------- | -------- | -------- | -------- | -------- | 19| type | string | <br>button | No| Type of the component, which cannot be dynamically modified. The options are as follows:<br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name. | 20| checked | boolean | false | No| Whether the component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**.| 21| name | string | - | No| Name of the component.| 22| value | string | - | No| Value of the component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.| 23| id | string | - | No| Unique ID of the component.| 24| style | string | - | No| Style declaration of the component.| 25| class | string | - | No| Style class of the component, which is used to refer to a style table.| 26| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| 27 28 29## Events 30 31- When **type** is set to **checkbox** or **radio**, the following events are supported. 32 | Name| Parameter| Description| 33 | -------- | -------- | -------- | 34 | change | { checked:true \| false } | Triggered when the checked status of the **checkbox** or **radio** button changes.| 35 | click | - | Triggered when the component is clicked. | 36 | longpress | - | Triggered when the component is long pressed. | 37 | swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component. | 38 39- When **type** is set to **button**, the following events are supported. 40 | Name| Parameter| Description| 41 | -------- | -------- | -------- | 42 | click | - | Triggered when the component is clicked. | 43 | longpress | - | Triggered when the component is long pressed. | 44 | swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component. | 45 46 47## Styles 48 49| Name| Type| Default Value| Mandatory| Description| 50| -------- | -------- | -------- | -------- | -------- | 51| color | <color> | \#ffffff | No| Text color of the component.| 52| font-size | <length> | 30px | No| Font size of the component.| 53| width | <length> | - | No| Width of the component. The default value for a button is **100px**.| 54| height | <length> | - | No| Height of the component. The default value for a button is **50px**.| 55| font-family | string | SourceHanSansSC-Regular | No| Font. Only the **SourceHanSansSC-Regular** font is supported.| 56| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- 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.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 57| padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| 58| margin | <length> \| <percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- 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.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 59| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| 60| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| 61| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| 62| border-radius | <length> | - | No| Radius of round-corner borders. | 63| background-color | <color> | - | No| Background color.| 64| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 65| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **left**: 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.<br>- **top**: 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. | 66 67## Example 68 691. Common button 70 71 ```html 72 <!-- xxx.hml --> 73 <div class="div-button"> 74 <input class="button" type="button" value="Input-Button"></input> 75 </div> 76 ``` 77 78 ```css 79 /* xxx.css */ 80 .div-button { 81 flex-direction: column; 82 align-items: center; 83 width: 100%; 84 height: 100%; 85 } 86 .button { 87 margin-top: 30px; 88 width: 280px; 89 } 90 ``` 91 92  93 94 95 962. Check box 97 98 ```html 99 <!-- xxx.hml --> 100 <div class="content"> 101 <input onchange="checkboxOnChange" checked="true" type="checkbox"></input> 102 <text class="text">{{text}}</text> 103 </div> 104 ``` 105 106 ```css 107 /* xxx.css */ 108 .content{ 109 width: 100%; 110 height: 100%; 111 flex-direction: column; 112 align-items: center; 113 justify-content: center; 114 } 115 .text{ 116 font-size: 30px; 117 text-align: center; 118 width: 200px; 119 margin-top: 20px; 120 height: 100px; 121 } 122 ``` 123 124 ```javascript 125 // xxx.js 126 export default { 127 data: { 128 text: "text" 129 }, 130 checkboxOnChange(e) { 131 this.text = e.checked; 132 } 133 } 134 ``` 135 136  137 1383. Radio button 139 140 ```html 141 <!-- xxx.hml --> 142 <div class="container"> 143 <div class="item"> 144 <input type="radio" checked="true" name="radioSample" value="radio1" onchange="onRadioChange"></input> 145 <text class="text">radio1</text> 146 </div> 147 <div class="item"> 148 <input type="radio" checked="false" name="radioSample" value="radio2" onchange="onRadioChange"></input> 149 <text class="text">radio2</text> 150 </div> 151 <div class="item"> 152 <input type="radio" checked="false" name="radioSample" value="radio3" onchange="onRadioChange"></input> 153 <text class="text">radio3</text> 154 </div> 155 </div> 156 ``` 157 158 ```css 159 /* xxx.css */ 160 .container { 161 width: 100%; 162 height: 100%; 163 justify-content: center; 164 align-items: center; 165 flex-direction: column; 166 } 167 .item { 168 width: 50%; 169 height: 30%; 170 justify-content: center; 171 } 172 .text { 173 margin-top: 25%; 174 font-size: 30px; 175 text-align: center; 176 width: 200px; 177 height: 100px; 178 } 179 ``` 180 181  182
