• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Radio Button (Radio)
2
3
4The **\<Radio>** component allows users to select from a set of mutually exclusive options. Only one radio button in a given group can be selected at the same time. For details, see [Radio](../reference/arkui-ts/ts-basic-components-radio.md).
5
6
7## Creating a Radio Button
8
9You can create a radio button by calling the following API:
10
11
12```ts
13Radio(options: {value: string, group: string})
14```
15
16In this API, **value** indicates the name of the radio button, and **group** indicates the name of the group to which the radio button belongs. You can use the **checked** attribute of the radio button to specify whether it is selected. The value **true** means that the radio button is selected.
17
18The color and shape cannot be customized for the radio button.
19
20```ts
21Radio({ value: 'Radio1', group: 'radioGroup' })
22  .checked(false)
23Radio({ value: 'Radio2', group: 'radioGroup' })
24  .checked(true)
25```
26
27
28![en-us_image_0000001562820821](figures/en-us_image_0000001562820821.png)
29
30
31## Adding Events
32
33The **\<Radio>** component supports the [universal events](../reference/arkui-ts/ts-universal-events-click.md). In addition, it can be bound to the **onChange** event so that it responds with custom behavior after being selected.
34
35
36
37```ts
38  Radio({ value: 'Radio1', group: 'radioGroup' })
39    .onChange((isChecked: boolean) => {
40      if(isChecked) {
41        // Operation
42      }
43    })
44  Radio({ value: 'Radio2', group: 'radioGroup' })
45    .onChange((isChecked: boolean) => {
46      if(isChecked) {
47        // Operation
48      }
49    })
50```
51
52
53## Example Scenario
54
55In this example, the **\<Radio>** components are used to switch between sound modes.
56
57
58```ts
59// xxx.ets
60import promptAction from '@ohos.promptAction';
61@Entry
62@Component
63struct RadioExample {
64  @State Rst:promptAction.ShowToastOptions = {'message': 'Ringing mode.'}
65  @State Vst:promptAction.ShowToastOptions = {'message': 'Vibration mode.'}
66  @State Sst:promptAction.ShowToastOptions = {'message': 'Silent mode.'}
67  build() {
68    Row() {
69      Column() {
70        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
71          .height(50)
72          .width(50)
73          .onChange((isChecked: boolean) => {
74            if(isChecked) {
75              // Switch to the ringing mode.
76              promptAction.showToast(this.Rst)
77            }
78          })
79        Text('Ringing')
80      }
81      Column() {
82        Radio({ value: 'Radio2', group: 'radioGroup' })
83          .height(50)
84          .width(50)
85          .onChange((isChecked: boolean) => {
86            if(isChecked) {
87              // Switch to the vibration mode.
88              promptAction.showToast(this.Vst)
89            }
90          })
91        Text('Vibration')
92      }
93      Column() {
94        Radio({ value: 'Radio3', group: 'radioGroup' })
95          .height(50)
96          .width(50)
97          .onChange((isChecked: boolean) => {
98            if(isChecked) {
99              // Switch to the silent mode.
100              promptAction.showToast(this.Sst)
101            }
102          })
103        Text('Silent')
104      }
105    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
106  }
107}
108```
109
110
111![en-us_image_0000001562700457](figures/en-us_image_0000001562700457.png)
112