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 of the radio button to specify whether it is selected. The value **true** means that the radio button is selected.
17
18The style of the radio button can be customized for the selected and unselected states, but the shape cannot be customized.
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 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 '@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.png)
111