# toggle The **** 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. >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This component is supported since API version 5. ## Permission List None ## Child Component Not supported ## Attribute In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.

Name	Type	Default Value	Mandatory	Description
value	string	-	Yes	Text value of the toggle.
checked	boolean	false	No	Whether the toggle is selected.

## Style In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.

Name	Type	Default Value	Mandatory	Description
color	<color>	#E5000000	No	Text color of the toggle.
font-size	<length>	16px	No	Font size of the toggle.
allow-scale	boolean	true	No	Whether the font size changes with the system's font size settings. NOTE: If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.
font-style	string	normal	No	Font style of the toggle.
font-weight	number \| string	normal	No	Font weight of the toggle. For details, see font-weight of the text component.
font-family	<string>	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 font specified by Custom Font Styles is used for the text.

## Event In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.

Name	Parameter	Description
change	{ checked: isChecked }	Triggered when the toggle is selected or unselected.

## Method Methods in [Universal Methods](js-components-common-methods.md) are supported. ## Example ```

1. Multiple choice example

2. Single choice example

``` ``` /* xxx.css */ .margin { margin: 7px; } ``` ``` // xxx.js export default { data: { toggle_list: [ { "id":"1001", "name":"Living room", "checked":true }, { "id":"1002", "name":"Bedroom", "checked":false }, { "id":"1003", "name":"Second bedroom", "checked":false }, { "id":"1004", "name":"Kitchen", "checked":false }, { "id":"1005", "name":"Study", "checked":false }, { "id":"1006", "name":"Garden", "checked":false }, { "id":"1007", "name":"Bathroom", "checked":false }, { "id":"1008", "name":"Balcony", "checked":false }, ], toggles: ["Living room","Bedroom","Kitchen","Study"], idx: "" }, allclick(arg) { this.idx = arg }, allchange(e) { if (e.checked === true) { for (var i = 0; i < this.toggle_list.length; i++) { if (this.toggle_list[i].id === this.idx) { this.toggle_list[i].checked = true } else { this.toggle_list[i].checked = false } } } } } ``` ![](figures/screenshot.png)