1# Radio 2 3单选框,提供相应的用户交互选择项。 4 5> **说明:** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Radio(options: {value: string, group: string}) 18 19从API version 9开始,该接口支持在ArkTS卡片中使用。 20 21**参数:** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| -------- | -------- | -------- | -------- | 25| value | string | 是 | 当前单选框的值。| 26| group | string | 是 | 当前单选框的所属群组名称,相同group的Radio只能有一个被选中。| 27 28## 属性 29 30除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性: 31 32| 名称 | 参数类型 | 描述 | 33| -------- | -------- | -------- | 34| checked | boolean | 设置单选框的选中状态。<br/>默认值:false <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。| 35 36## 事件 37 38除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件: 39 40| 名称 | 功能描述 | 41| -------- | -------- | 42| onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> - isChecked为true时,表示从未选中变为选中。<br> - isChecked为false时,表示从选中变为未选中。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | 43 44 45## 示例 46 47```ts 48// xxx.ets 49@Entry 50@Component 51struct RadioExample { 52 build() { 53 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 54 Column() { 55 Text('Radio1') 56 Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) 57 .height(50) 58 .width(50) 59 .onChange((isChecked: boolean) => { 60 console.log('Radio1 status is ' + isChecked) 61 }) 62 } 63 Column() { 64 Text('Radio2') 65 Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) 66 .height(50) 67 .width(50) 68 .onChange((isChecked: boolean) => { 69 console.log('Radio2 status is ' + isChecked) 70 }) 71 } 72 Column() { 73 Text('Radio3') 74 Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) 75 .height(50) 76 .width(50) 77 .onChange((isChecked: boolean) => { 78 console.log('Radio3 status is ' + isChecked) 79 }) 80 } 81 }.padding({ top: 30 }) 82 } 83} 84``` 85![](figures/radio.gif) 86