1# input 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @kangshihui--> 5<!--Designer: @pssea--> 6<!--Tester: @jiaoaozihao--> 7<!--Adviser: @HelloCrease--> 8 9 10交互式组件，提供单选框功能。 11 12> **说明：** 13> 14> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15 16## 属性 17 18除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 19 20| 名称 | 类型 | 默认值 | 必填 | 描述 | 21| ------- | ------- | ----- | ---- | ---------------------------------------- | 22| type | string | radio | 是 | input组件类型，当前仅支持radio类型：<br/>- "radio"：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个。 | 23| checked | boolean | false | 否 | 当前组件是否选中，true表示选中，false表示未选中。 | 24| name | string | - | 否 | input组件的名称。 | 25| value | string | - | 否 | input组件的value值，类型为radio时必填且相同name值的选项该值唯一。 | 26 27 28## 样式 29 30支持[通用样式](js-service-widget-common-styles.md)。 31 32 33## 事件 34 35| 名称 | 参数 | 描述 | 36| ------ | ------------------ | ---------------------------------------- | 37| change | $event.checkedItem | radio单选框的checked状态发生变化时触发该事件，返回选中的组件value值。 | 38| click | - | 点击动作触发该事件。 | 39 40 41## 示例 42 43 44```html 45<!-- xxx.hml --> 46<div class="content"> 47 <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange"></input> 48 <input type="radio" checked='false' name="radioSample" value="radio2" onchange="onRadioChange"></input> 49 <input type="radio" checked='false' name="radioSample" value="radio3" onchange="onRadioChange"></input> 50</div> 51``` 52 53 54```css 55/* xxx.css */ 56.content{ 57 width: 100%; 58 height: 200px; 59 justify-content: center; 60 align-items: center; 61} 62``` 63 64 65```json 66{ 67 "actions": { 68 "onRadioChange":{ 69 "action": "message", 70 "params": { 71 "checkedRadio": "$event.checkedItem" 72 } 73 } 74 } 75} 76``` 77**4*4卡片** 78 79 80 81
