# 开关 提供两个互斥状态间切换的控件，例如开/关。 ## 使用规则   | **开关 switch** | **单选 Radio** | **多选 Checkbox** ---|---|---|--- **可选数量** | 单个 | 多个（选项低于 6 个） | 多个 **选择次数** | 2（开/关） | 单次 | 多次（0-所有） **默认选项** | 有 | 有 | 没有 **关联关系** | 相互排斥（开启、关闭） | 相互排斥 | 相互独立（有三种状态：非勾选态、勾选态、未全选态） **使用场景** | - 表单中使用时，需要搭配 label 使用，开关后可不带文案
- 使用开关时，开关跟随的文案应为静态，并采用肯定句 | - 表单中使用时，需要搭配 label 使用，且单选或者多选后面必须跟随文案 | - 同单选 **生效时间** | - 和输入类表单项搭配使用，点击提交生效
- 单独使用立即生效，如系统设置 | - 同开关 | - 同开关 需要表示开关状态/两种状态之间的切换，立即执行操作时使用。通常用于功能设置页面或表单中。 建议与标题或描述文本搭配使用，搭配文案只需展示开关控制的内容即可，搭配文案不随着开关状态而变化，不建议在文案中加入「非」的逻辑词语（如「不显示通知」）。 逻辑上的二元状态，如开启/关闭、激活/不激活，建议使用开关。人为设立的对立或竞争选项，如列表视图、卡片视图，不建议使用开关组件。 ## 组成要素 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3fcc4ef15c4fb4b72dcff81c202fe1c4_HBjxjV3arc.png?height=402&lazyload=true&maxWidth=800&width=2048) 1. **轨道** 当前状态的显示，常见存在激活和未激活两种状态 1. **滑块** 点击切换开关 ## 控件状态 开关组件最终展示的为两种状态：开启、关闭。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/fdec17288a4c720db61106c009993144_iYoRE8n09B.png?height=284&lazyload=true&maxWidth=800&width=2048) ## 样式规则说明 ### 尺寸规则 - 开关分为两个尺寸：大尺寸和小尺寸 - 大尺寸使用在空间较大的位置，与标题或者有主副标题场景搭配使用 - 小尺寸使用在空间较小的地方，一般是与一句话搭配使用 - 大尺寸开关与小尺寸开关不建议用来表达父/子级关系 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/d81256b7fd694708eaffb642577a3f58_xRo1GnYClv.png?height=356&lazyload=true&maxWidth=800&width=2048) ### 状态说明 开关为「开」的状态： - 开-normal、开-disabled、开-loading 开关为「关」的状态： - 关-normal、关-disabled、关-loading 滑块投影： - Shadow-S-down ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/1e5a1e6f1b36de208d52bee3127b6d5f_nVbXGlXZ2X.png?height=284&lazyload=true&maxWidth=800&width=2048) ### 使用场景示例 - 根据实际使用场景来使用小尺寸或者大尺寸开关 - 下图左（小尺寸开关）、下图右（大尺寸开关） ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/7a24cf5462c5efaaafa32f89c1294383_CTUfDEWmEd.png?height=1300&lazyload=true&width=2048) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/e00fb68846f0fcaff7e774b50a783a7a_IayHRgdEH6.png?height=1300&lazyload=true&width=2048) ---|--- ## 使用示例（正反案例） ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/92cccefe5c56077adbc6ab507e78dc9b_7l3CRNm26p.png?height=1300&lazyload=true&width=2048) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/2ecb31dec76b6519e7b2b45f7cd0845a_h5Qeu5kXYw.png?height=1300&lazyload=true&width=2048) ---|--- ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f280964f6dabb16bf6ea6801799276a3_3hYp5rFRao.png?height=20&lazyload=true&width=800)
**正确：**
对于纯开关场景，开关操作之后即可生效，不用搭配按钮使用 | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5d576ae0cad45457a2c92e8b32194543_EWbyDet7Zc.png?height=20&lazyload=true&width=800)
**避免：**
对于纯开关设置场景，不需要让用户再次点击提交或保存
**建议使用：**
在表单中使用的开关，开关操作之后需要对表单中的其他字段或数据产生实时影响 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0ba03363b0ab69b74badbc0d49ed7b2d_tKaj2EvoLV.png?height=1300&lazyload=true&width=2048) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8190cd6eab9dc079af4e3f561e765b44_PombRJoKNh.png?height=1300&lazyload=true&width=2048) ---|--- 开启前 | 开启后