1# toggle
2
3>  **NOTE**
4>
5>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<toggle>** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles.
8
9
10## Required Permissions
11
12None
13
14
15## Child Components
16
17Not supported
18
19
20## Attributes
21
22In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
23
24| Name     | Type     | Default Value  | Mandatory  | Description        |
25| ------- | ------- | ----- | ---- | ---------- |
26| value   | string  | -     | Yes   | Text value of the toggle. |
27| checked | boolean | false | No   | Whether the toggle is selected.|
28
29
30## Styles
31
32In addition to the [universal styles](js-components-common-styles.md), the following styles are supported.
33
34| Name         | Type                        | Default Value       | Mandatory  | Description                                      |
35| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
36| text-color  | &lt;color&gt;              | \#E5000000 | No   | Text color of the toggle.                              |
37| font-size   | &lt;length&gt;             | 16px       | No   | Font size of the toggle.                              |
38| allow-scale | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
39| font-style  | string                     | normal     | No   | Font style of the toggle.                              |
40| font-weight | number \| string | normal     | No   | Font weight of the toggle. For details, see **font-weight** of the [**\<text>**](js-components-basic-text.md#styles) component.|
41| font-family | &lt;string&gt;             | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](js-components-common-customizing-font.md) is used for the text.|
42
43
44## Events
45
46In addition to the [universal events](js-components-common-events.md), the following events are supported.
47
48| Name    | Parameter                             | Description            |
49| ------ | ------------------------------- | -------------- |
50| change | { checked: isChecked } | Triggered when the toggle is selected or unselected.|
51
52
53## Methods
54
55The [universal methods](js-components-common-methods.md) are supported.
56
57
58## Example
59
60```html
61<!-- xxx.hml -->
62<div style="flex-direction: column;">
63  <text class="margin">1. Multiple choice example</text>
64  <div style="flex-wrap: wrap">
65    <toggle class="margin" for="{{toggles}}">{{$item}}</toggle>
66  </div>
67  <text class="margin">2. Single choice example</text>
68  <div style="flex-wrap: wrap">
69    <toggle class="margin" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}"
70      value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
71  </div>
72</div>
73```
74
75```css
76/* xxx.css */
77.margin {
78  margin: 7px;
79}
80```
81
82```js
83// xxx.js
84export default {
85    data: {
86        toggle_list: [
87            {
88                "id": "1001", "name": "Living room", "checked": true
89            },
90            {
91                "id": "1002", "name": "Bedroom", "checked": false
92            },
93            {
94                "id": "1003", "name": "Second bedroom", "checked": false
95            },
96            {
97                "id": "1004", "name": "Kitchen", "checked": false
98            },
99            {
100                "id": "1005", "name": "Study", "checked": false
101            },
102            {
103                "id": "1006", "name": "Garden", "checked": false
104            },
105            {
106                "id": "1007", "name": "Bathroom", "checked": false
107            },
108            {
109                "id": "1008", "name": "Balcony", "checked": false
110            },
111        ],
112        toggles: ["Living room", "Bedroom", "Kitchen", "Study"],
113        idx: ""
114    },
115    allclick(arg) {
116        this.idx = arg;
117    },
118    allchange(e) {
119        if (e.checked != true) {
120            return;
121        }
122        for (var i = 0; i < this.toggle_list.length; i++) {
123            if (this.toggle_list[i].id === this.idx) {
124                this.toggle_list[i].checked = true;
125            } else {
126                this.toggle_list[i].checked = false;
127            }
128        }
129    }
130}
131```
132
133![screenshot](figures/screenshot.png)
134