1# Radio 2 3The **\<Radio>** component allows users to select from a set of mutually exclusive options. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17Radio(options: {value: string, group: string}) 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| value | string | Yes| Value of the current radio button.| 26| group | string | Yes| Name of the group to which the radio button belongs. Only one radio button in a given group can be selected at a time.| 27 28## Attributes 29 30In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 31 32| Name| Type| Description| 33| -------- | -------- | -------- | 34| checked | boolean | Whether the radio button is selected.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| 35 36## Events 37 38In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 39 40| Name| Description| 41| -------- | -------- | 42| onChange(callback: (isChecked: boolean) => void) | Triggered when the selected state of the radio button changes.<br> - If **isChecked** is **true**, it indicates that the radio button changes from unselected to selected.<br> - If **isChecked** is **false**, it indicates that the radio button changes from selected to unselected.<br>Since API version 9, this API is supported in ArkTS widgets.| 43 44 45## Example 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 86
