# toggle - [权限列表](#zh-cn_topic_0000001127125082_section11257113618419) - [子组件](#zh-cn_topic_0000001127125082_section9288143101012) - [属性](#zh-cn_topic_0000001127125082_section2598341175212) - [样式](#zh-cn_topic_0000001127125082_section3655917541) - [事件](#zh-cn_topic_0000001127125082_section3892191911214) - [方法](#zh-cn_topic_0000001127125082_section2279124532420) - [示例](#zh-cn_topic_0000001127125082_section520313404174) 状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 >![](../../public_sys-resources/icon-note.gif) **说明：** >从 API Version 5 开始支持。 ## 权限列表无 ## 子组件不支持。 ## 属性除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性：

名称	类型	默认值	必填	描述
value	string	-	是	状态按钮的文本值。
checked	boolean	false	否	状态按钮是否被选中。

## 样式除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式：

名称	类型	默认值	必填	描述
color	<color>	#E5000000	否	状态按钮的文本颜色。
font-size	<length>	16px	否	状态按钮的文本尺寸。
allow-scale	boolean	true	否	状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。说明：如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。
font-style	string	normal	否	状态按钮的字体样式。
font-weight	number \| string	normal	否	状态按钮的字体粗细。见text组件font-weight的样式属性。
font-family	<string>	sans-serif	否	状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

## 事件除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件：

名称	参数	描述
change	{ checked：isChecked }	组件选中状态发生变化时触发。

## 方法支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 ## 示例 ```

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)