1# Toggle
2
3
4The **Toggle** component provides a clickable element in the check box, button, or switch type, typically used to switch between two states. For details, see [Toggle](../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md).
5
6
7## Creating a Toggle
8
9You can create a toggle by calling the following API:
10
11```ts
12Toggle(options: { type: ToggleType, isOn?: boolean })
13```
14
15In this API, **ToggleType** indicates the toggle type, which can be **Button**, **Checkbox**, or **Switch**, and **isOn** specifies whether the toggle is turned on.
16
17Since API version 11, the default style of the **Checkbox** component is changed from rounded square to circle.
18
19The API can be called in either of the following ways:
20
21
22- Create a toggle that does not contain child components.
23  This can be achieved by calling the API with **ToggleType** set to **Checkbox** or **Switch**.
24
25
26    ```ts
27  Toggle({ type: ToggleType.Checkbox, isOn: false })
28  Toggle({ type: ToggleType.Checkbox, isOn: true })
29    ```
30
31  ![en-us_image_0000001562940485](figures/en-us_image_0000001562940485.png)
32
33  ```ts
34  Toggle({ type: ToggleType.Switch, isOn: false })
35  Toggle({ type: ToggleType.Switch, isOn: true })
36  ```
37
38    ![en-us_image_0000001511421228](figures/en-us_image_0000001511421228.png)
39
40- Create a toggle that contains a child component.
41  When **ToggleType** is set to **Button**, only one child component is allowed. If the child component has text set, the text content is displayed on the button.
42
43  ```ts
44  Toggle({ type: ToggleType.Button, isOn: false }) {
45    Text('status button')
46      .fontColor('#182431')
47      .fontSize(12)
48  }.width(100)
49  Toggle({ type: ToggleType.Button, isOn: true }) {
50    Text('status button')
51      .fontColor('#182431')
52      .fontSize(12)
53  }.width(100)
54  ```
55
56    ![en-us_image_0000001511900404](figures/en-us_image_0000001511900404.png)
57
58
59## Setting Styles
60
61- Use the **selectedColor** attribute to set the background color of the toggle for when it is turned on.
62
63  ```ts
64  Toggle({ type: ToggleType.Button, isOn: true }) {
65    Text('status button')
66    .fontColor('#182431')
67    .fontSize(12)
68  }.width(100).selectedColor(Color.Pink)
69  Toggle({ type: ToggleType.Checkbox, isOn: true })
70    .selectedColor(Color.Pink)
71  Toggle({ type: ToggleType.Switch, isOn: true })
72    .selectedColor(Color.Pink)
73  ```
74
75  ![en-us_image_0000001563060657](figures/en-us_image_0000001563060657.png)
76
77- Use the **switchPointColor** attribute to set the color of the circular slider. This attribute is valid only when **type** of the toggle is set to **ToggleType.Switch**.
78
79  ```ts
80  Toggle({ type: ToggleType.Switch, isOn: false })
81    .switchPointColor(Color.Pink)
82  Toggle({ type: ToggleType.Switch, isOn: true })
83    .switchPointColor(Color.Pink)
84  ```
85
86  ![en-us_image_0000001511421232](figures/en-us_image_0000001511421232.png)
87
88
89## Adding Events
90
91The **Toggle** 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 turned on or off.
92
93
94```ts
95Toggle({ type: ToggleType.Switch, isOn: false })
96  .onChange((isOn: boolean) => {
97      if(isOn) {
98        // Operation
99      }
100  })
101```
102
103
104## Example Scenario
105
106In this example, the **Toggle** component is used to enable or disable Bluetooth.
107
108```ts
109// xxx.ets
110import { promptAction } from '@kit.ArkUI';
111@Entry
112@Component
113struct ToggleExample {
114  @State BOnSt:promptAction.ShowToastOptions = {'message': 'Bluetooth is on.'}
115  @State BOffSt:promptAction.ShowToastOptions = {'message': 'Bluetooth is off.'}
116  build() {
117    Column() {
118      Row() {
119        Text("Bluetooth Mode")
120          .height(50)
121          .fontSize(16)
122      }
123      Row() {
124        Text("Bluetooth")
125          .height(50)
126          .padding({left: 10})
127          .fontSize(16)
128          .textAlign(TextAlign.Start)
129          .backgroundColor(0xFFFFFF)
130        Toggle({ type: ToggleType.Switch })
131          .margin({left: 200, right: 10})
132          .onChange((isOn: boolean) => {
133            if(isOn) {
134              promptAction.showToast(this.BOnSt)
135            } else {
136              promptAction.showToast(this.BOffSt)
137            }
138          })
139      }
140      .backgroundColor(0xFFFFFF)
141    }
142    .padding(10)
143    .backgroundColor(0xDCDCDC)
144    .width('100%')
145    .height('100%')
146  }
147}
148```
149
150
151![en-us_image_0000001511740448](figures/en-us_image_0000001511740448.png)
152