• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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: RadioOptions)
18
19Creates a radio button.
20
21**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name | Type                                 | Mandatory| Description              |
28| ------- | ------------------------------------- | ---- | ------------------ |
29| options | [RadioOptions](#radiooptions) | No  | Parameters of the radio button.|
30
31## RadioOptions
32
33| Name| Type| Mandatory| Description|
34| -------- | -------- | -------- | -------- |
35| value | string | Yes| Value of the current radio button.|
36| 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.|
37
38## Attributes
39
40In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
41
42| Name| Type| Description|
43| -------- | -------- | -------- |
44| 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.|
45| radioStyle<sup>10+</sup> | [RadioStyle](#radiostyle10) | Style of the radio button in selected or deselected state.<br>Since API version 10, this API is supported in ArkTS widgets.|
46
47## Events
48
49In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
50
51| Name| Description|
52| -------- | -------- |
53| 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.|
54
55## RadioStyle<sup>10+</sup>
56
57| Name                  | Type                                      | Mandatory| Default Value | Description                  |
58| ---------------------- | ------------------------------------------ | ---- | ------- | ---------------------- |
59| checkedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No  | #007DFF | Color of the background when the radio button is selected.    |
60| uncheckedBorderColor   | [ResourceColor](ts-types.md#resourcecolor) | No  | #182431 | Color of the border when the radio button is deselected.    |
61| indicatorColor         | [ResourceColor](ts-types.md#resourcecolor) | No  | #FFFFFF | Color of the indicator when the radio button is selected.|
62
63## Example
64
65```ts
66// xxx.ets
67@Entry
68@Component
69struct RadioExample {
70  build() {
71    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
72      Column() {
73        Text('Radio1')
74        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
75          .radioStyle({
76            checkedBackgroundColor: Color.Pink
77          })
78          .height(50)
79          .width(50)
80          .onChange((isChecked: boolean) => {
81            console.log('Radio1 status is ' + isChecked)
82          })
83      }
84      Column() {
85        Text('Radio2')
86        Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
87          .radioStyle({
88            checkedBackgroundColor: Color.Pink
89          })
90          .height(50)
91          .width(50)
92          .onChange((isChecked: boolean) => {
93            console.log('Radio2 status is ' + isChecked)
94          })
95      }
96      Column() {
97        Text('Radio3')
98        Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
99          .radioStyle({
100            checkedBackgroundColor: Color.Pink
101          })
102          .height(50)
103          .width(50)
104          .onChange((isChecked: boolean) => {
105            console.log('Radio3 status is ' + isChecked)
106          })
107      }
108    }.padding({ top: 30 })
109  }
110}
111```
112![radio](figures/radio.gif)
113