• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Radio Button
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
16  Creates a radio button. In 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. The color and shape cannot be customized for the radio button.
17
18```ts
19Radio({ value: 'Radio1', group: 'radioGroup' })
20  .checked(false)
21Radio({ value: 'Radio2', group: 'radioGroup' })
22  .checked(true)
23```
24
25
26![en-us_image_0000001562820821](figures/en-us_image_0000001562820821.png)
27
28
29## Adding Events
30
31The **\<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.
32
33
34
35```ts
36  Radio({ value: 'Radio1', group: 'radioGroup' })
37    .onChange((isChecked: boolean) => {
38      if(isChecked) {
39        // Operation
40      }
41    })
42  Radio({ value: 'Radio2', group: 'radioGroup' })
43    .onChange((isChecked: boolean) => {
44      if(isChecked) {
45        // Operation
46      }
47    })
48```
49
50
51## Example Scenario
52
53In this example, the **\<Radio>** components are used to switch between sound modes.
54
55
56```ts
57// xxx.ets
58import promptAction from '@ohos.promptAction';
59@Entry
60@Component
61struct RadioExample {
62  build() {
63    Row() {
64      Column() {
65        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
66          .height(50)
67          .width(50)
68          .onChange((isChecked: boolean) => {
69            if(isChecked) {
70              // Switch to the ringing mode.
71              promptAction.showToast({ message: 'Ringing mode.' })
72            }
73          })
74        Text('Ringing')
75      }
76      Column() {
77        Radio({ value: 'Radio2', group: 'radioGroup' })
78          .height(50)
79          .width(50)
80          .onChange((isChecked: boolean) => {
81            if(isChecked) {
82              // Switch to the vibration mode.
83              promptAction.showToast({ message: 'Vibration mode.' })
84            }
85          })
86        Text('Vibration')
87      }
88      Column() {
89        Radio({ value: 'Radio3', group: 'radioGroup' })
90          .height(50)
91          .width(50)
92          .onChange((isChecked: boolean) => {
93            if(isChecked) {
94              // Switch to the silent mode.
95              promptAction.showToast({ message: 'Silent mode.' })
96            }
97          })
98        Text('Silent')
99      }
100    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
101  }
102}
103```
104
105
106![en-us_image_0000001562700457](figures/en-us_image_0000001562700457.png)
107