1# Toggle 2 3The **\<Toggle>** component provides a clickable element in the check box, button, or switch type. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11This component can contain child components only when **ToggleType** is set to **Button**. 12 13 14## APIs 15 16Toggle(options: { type: ToggleType, isOn?: boolean }) 17 18Since API version 9, this API is supported in ArkTS widgets. 19 20**Parameters** 21 22| Name| Type| Mandatory | Description | 23| ---- | ---------- | -----| -------------- | 24| type | [ToggleType](#toggletype) | Yes | Type of the toggle.| 25| isOn | boolean | No | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.<br>Default value: **false**<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 26 27 28## ToggleType 29 30Since API version 9, this API is supported in ArkTS widgets. 31 32| Name | Description | 33| -------- | ---------------- | 34| Checkbox | Check box type.<br>**NOTE**<br>Since API version 11, the default style of the check box is changed from rounded square to circle.<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: '14px',<br> right: '14px',<br> bottom: '14px',<br> left: '14px'<br> } | 35| Button | Button type. The set string, if any, will be displayed inside the button. | 36| Switch | Switch type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: '6px',<br> right: '14px',<br> bottom: '6px',<br> left: '14px'<br> } | 37 38## Attributes 39 40In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 41 42| Name | Parameter | Description | 43| ---------------- | --------------------------- | ---------------------- | 44| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component when it is turned on.<br>Since API version 9, this API is supported in ArkTS widgets.| 45| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the circular slider when the component is of the **Switch** type.<br>**NOTE**<br>This attribute is valid only when **type** is set to **ToggleType.Switch**.<br>Since API version 9, this API is supported in ArkTS widgets.| 46 47## Events 48 49In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 50 51| Name| Description| 52| -------- | -------- | 53| onChange(callback: (isOn: boolean) => void) | Triggered when the toggle status changes.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>If **isOn** is **true**, it indicates that the toggle changes from off to on. If **isOn** is **false**, it indicates that the toggle changes from on to off.| 54 55 56## Example 57 58```ts 59// xxx.ets 60@Entry 61@Component 62struct ToggleExample { 63 build() { 64 Column({ space: 10 }) { 65 Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') 66 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 67 Toggle({ type: ToggleType.Switch, isOn: false }) 68 .selectedColor('#007DFF') 69 .switchPointColor('#FFFFFF') 70 .onChange((isOn: boolean) => { 71 console.info('Component status:' + isOn) 72 }) 73 74 Toggle({ type: ToggleType.Switch, isOn: true }) 75 .selectedColor('#007DFF') 76 .switchPointColor('#FFFFFF') 77 .onChange((isOn: boolean) => { 78 console.info('Component status:' + isOn) 79 }) 80 } 81 82 Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') 83 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 84 Toggle({ type: ToggleType.Checkbox, isOn: false }) 85 .size({ width: 20, height: 20 }) 86 .selectedColor('#007DFF') 87 .onChange((isOn: boolean) => { 88 console.info('Component status:' + isOn) 89 }) 90 91 Toggle({ type: ToggleType.Checkbox, isOn: true }) 92 .size({ width: 20, height: 20 }) 93 .selectedColor('#007DFF') 94 .onChange((isOn: boolean) => { 95 console.info('Component status:' + isOn) 96 }) 97 } 98 99 Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') 100 Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { 101 Toggle({ type: ToggleType.Button, isOn: false }) { 102 Text('status button').fontColor('#182431').fontSize(12) 103 }.width(106) 104 .selectedColor('rgba(0,125,255,0.20)') 105 .onChange((isOn: boolean) => { 106 console.info('Component status:' + isOn) 107 }) 108 109 Toggle({ type: ToggleType.Button, isOn: true }) { 110 Text('status button').fontColor('#182431').fontSize(12) 111 }.width(106) 112 .selectedColor('rgba(0,125,255,0.20)') 113 .onChange((isOn: boolean) => { 114 console.info('Component status:' + isOn) 115 }) 116 } 117 }.width('100%').padding(24) 118 } 119} 120``` 121 122 123
