• 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/apis-arkui/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 to specify whether the radio button is selected. Setting it to **true** means that the radio button is selected.
17
18In addition, you can customize the style of the radio button for both the selected and unselected states.
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/apis-arkui/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```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
52
53In this example, the **Radio** components are used to switch between sound modes.
54
55
56```ts
57// xxx.ets
58import { promptAction } from '@kit.ArkUI';
59
60@Entry
61@Component
62struct RadioExample {
63  @State Rst:promptAction.ShowToastOptions = {'message': 'Ringing mode.'}
64  @State Vst:promptAction.ShowToastOptions = {'message': 'Vibration mode.'}
65  @State Sst:promptAction.ShowToastOptions = {'message': 'Silent mode.'}
66  build() {
67    Row() {
68      Column() {
69        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
70          .height(50)
71          .width(50)
72          .onChange((isChecked: boolean) => {
73            if(isChecked) {
74              // Switch to the ringing mode.
75              promptAction.showToast(this.Rst)
76            }
77          })
78        Text('Ringing')
79      }
80      Column() {
81        Radio({ value: 'Radio2', group: 'radioGroup' })
82          .height(50)
83          .width(50)
84          .onChange((isChecked: boolean) => {
85            if(isChecked) {
86              // Switch to the vibration mode.
87              promptAction.showToast(this.Vst)
88            }
89          })
90        Text('Vibration')
91      }
92      Column() {
93        Radio({ value: 'Radio3', group: 'radioGroup' })
94          .height(50)
95          .width(50)
96          .onChange((isChecked: boolean) => {
97            if(isChecked) {
98              // Switch to the silent mode.
99              promptAction.showToast(this.Sst)
100            }
101          })
102        Text('Silent')
103      }
104    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
105  }
106}
107```
108
109
110![en-us_image_0000001562700457](figures/en-us_image_0000001562700457.gif)
111