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.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 35| radioStyle<sup>10+</sup> | [RadioStyle](#radiostyle) | Style of the radio button in selected or deselected state.<br>Since API version 10, this API is supported in ArkTS widgets.| 36 37## Events 38 39In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 40 41| Name| Description| 42| -------- | -------- | 43| 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.| 44 45## RadioStyle 46 47| Name | Type | Mandatory| Default Value | Description | 48| ---------------------- | ------------------------------------------ | ---- | ------- | ---------------------- | 49| checkedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | #007DFF | Color of the background when the radio button is selected. | 50| uncheckedBorderColor | [ResourceColor](ts-types.md#resourcecolor) | No | #182431 | Color of the border when the radio button is deselected. | 51| indicatorColor | [ResourceColor](ts-types.md#resourcecolor) | No | #FFFFFF | Color of the indicator when the radio button is selected.| 52 53## Example 54 55```ts 56// xxx.ets 57@Entry 58@Component 59struct RadioExample { 60 build() { 61 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 62 Column() { 63 Text('Radio1') 64 Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) 65 .radioStyle({ 66 checkedBackgroundColor: Color.Pink 67 }) 68 .height(50) 69 .width(50) 70 .onChange((isChecked: boolean) => { 71 console.log('Radio1 status is ' + isChecked) 72 }) 73 } 74 Column() { 75 Text('Radio2') 76 Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) 77 .radioStyle({ 78 checkedBackgroundColor: Color.Pink 79 }) 80 .height(50) 81 .width(50) 82 .onChange((isChecked: boolean) => { 83 console.log('Radio2 status is ' + isChecked) 84 }) 85 } 86 Column() { 87 Text('Radio3') 88 Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) 89 .radioStyle({ 90 checkedBackgroundColor: Color.Pink 91 }) 92 .height(50) 93 .width(50) 94 .onChange((isChecked: boolean) => { 95 console.log('Radio3 status is ' + isChecked) 96 }) 97 } 98 }.padding({ top: 30 }) 99 } 100} 101``` 102 103
