开关
Switch
别名:开关拨动开关切换开关toggle 开关滑动开关开关键
这是什么
用滑轨上的圆形滑块表示二元设置的开与关，拨动立即生效，无需确认。 滑块位移与轨道变色同时反馈状态，右侧或内嵌「开 / 关」文字辅助辨认， 是设置页的标准控件。
交互实验室
试一试，再决定怎么用切换开关，观察设置的即时状态。
正在加载实验室…
使用时关注什么
- 01开关表达立即生效的设置，不用来提交表单。
- 02标签保持稳定，用状态说明开或关。
✓ 适用场景
- 二元设置拨动后立即生效（通知、深色模式）
- 状态改变无需提交即可见
- 设置页等以「开 / 关」心智组织的场景
✕ 不适用场景
- 修改后需要点保存才生效，用 checkbox + 表单
- 语义是「从列表多选几项」，用 checkbox
- 需要第三个中间状态，用分段控件
常见形式
基础
Basic
纯滑轨无文字
带状态文字
With text
内嵌开 / 关字样辅助辨认
设置行
Settings row
左标题右开关，设置页标准排布
实现要点
transitiontransform: translateXbackgroundborder-radius: 999px轨道 w 固定，thumb 用 translateX 在两端间过渡，轨道底色同步在灰与 accent 间切换， 全部时长乘 --demo-speed。role="switch" + aria-checked 表达状态； 整行 label 可点击；触控热区高不小于 32px（视觉可以更小）。 状态文字用 opacity 淡入淡出避免跳动。
平台 API
<input type="checkbox" role="switch">代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
相关概念
复选框Checkbox
用方形勾选框表示一组可多选的独立开关项，点击在选中与未选中间切换。 父级项可呈现半选态（部分子项选中），常用于批量选择、筛选与同意条款。
组件相似概念按压反馈Press Feedback
用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效搭配使用设置页Settings Page
集中管理账号偏好与系统配置的功能页面：一侧是稳定的设置导航（通用、通知、安全等分区）， 另一侧是行式表单列表——每行一个"标签 + 控件 + 说明"，低频修改、即改即存。 页面按配置域分区而非按任务流组织，用户靠扫读标题定位，改完即走。
页面搭配使用