开关Switch
你可能会说
像手机设置里那样，这个功能一拨就开、再拨就关。
在开启与关闭两种对立状态之间即时切换的开关控件。深色模式或自动保存适合用开关，并应在切换后反馈成功或失败。若多个设置需要统一保存，应改用 复选框 Checkbox 配合按钮。
也常被叫作Toggle拨动开关切换开关
什么时候用
- 设置页里的开 / 关项消息通知深色模式
- 拨完立即生效，最好给个反馈自动保存已开启自动保存
- 功能列表逐个启用、停用API 访问Webhook
- 实验功能的灰度入口实验新版编辑器
什么时候不用
- 提交后才生效的偏好：使用 复选框 Checkbox 配合 按钮 Button接收营销邮件提交
- 危险操作（如删除全部数据）：需要确认，不宜使用开关删除全部数据一个开关就删掉所有数据？
- 三个以上互斥状态：使用 单选框 Radio公开仅成员私密
- 同意协议等确认：使用 复选框 Checkbox我已阅读并同意《用户协议》
组成结构 · Anatomy
自动保存
灰底是关，品牌色是开
左右位置表达状态，切换带过渡动画
写清控制的是什么
常见变体 · Variants
开启On
功能当前处于打开状态
关闭Off
功能当前处于关闭状态
带文案With Label
自动保存
设置页里，说清这个开关管什么
禁用Disabled
开关当前不可操作
典型使用场景
消息通知设置
消息通知
📩 新消息通知收到私信或评论时提醒我
🔔 声音提醒新消息到达时播放提示音
🌙 免打扰模式23:00 – 8:00 不再提醒
深色模式切换
外观
🌙 深色模式切换后整个界面立即换肤
浅色
深色 ✓
自动保存
📝 七月产品规划（草稿）
自动保存
已于 15:32 自动保存 · 开启后每 30 秒保存到云端
实验功能灰度
实验室 Beta
🤖 AI 摘要对长文档自动生成摘要，逐步开放中
🪄 智能排版一键整理段落层级，仅 10% 用户可见
实验功能可能不稳定，遇到问题可随时关闭
延伸阅读 · 权威出处