开关

Switch

也常被叫作：开关按钮切换开关Toggle那个可以拨的东西开和关

界面与组件通常止于「主路径」约 1 分钟读完

你可能会这么说

「设置页里有个小开关，一拨就开一拨就关，比如「开启消息通知」「深色模式」。」

开关 Switch

表示一个开/关状态的控件，拨一下立即生效，适合只有两档、马上起效的设置。

开关（Switch）表示一个二选一的状态：开或关。它最典型的家是设置页——消息通知、深色模式、自动续费，拨一下立即生效，页面不用保存按钮。判断标准有两条：值只有两档，且拨完立即生效。两条都满足才用开关。

最常被用错的地方是把危险动作做成开关：「删除所有数据」用开关——一拨就删，没有确认机会，误触就没救。凡是有不可逆后果的操作，用「按钮 + 确认弹窗」，别用开关。第二个坑是状态区分只靠颜色：开是绿色关是灰色，色弱用户分不出来，开关要靠滑块位置变化表达状态，颜色只是辅助。第三个坑是开关没有名字：读屏用户听到「开关」，不知道管的是消息通知还是别的——每个开关必须有一个说人话的标签。

还有一类误用：页面有「保存」按钮却用开关。用户拨了开关没保存，以为生效了，刷新全没了。立即生效的设置才用开关；选完还要和其他字段一起提交的（比如「编辑资料」里的勾选），用勾选框，别用开关。

长什么样真实可交互，不是截图

通知设置

消息通知

深色模式

「删除所有数据」这类危险操作不该做成开关

真实开关是拨动的小控件，这里用按钮示意状态。注意底部那条：危险操作（删除、清空）一拨就执行、没有确认，绝不能做成开关。

拆开看，里面有这几块

1
轨道 Track
开关的底，拨动后颜色会变，但颜色不能是状态唯一的表达。
2
滑块 Thumb
拨动的小圆钮，滑块的位置变化本身就要能表达开/关。
3
标签 Label
这个开关控制什么，如「消息通知」。读屏念的就是它，必须说人话。
4
状态 State
开/关要用滑块位置 + 颜色双重区分，不只靠颜色；禁用态要能看出不能拨。

常见的有哪几种

立即生效开关Instant Switch

拨完马上生效，设置页标配，状态要持久化（刷新还在）。

用在：消息通知、深色模式

表单内开关Form Switch

拨了还没提交，要和其他字段一起保存。这时要明确提示「未保存」，别让用户以为生效了。

用在：编辑资料页里的选项

禁用开关Disabled

某种条件下不能改，比如付费功能未开通。要灰显且说明原因。

用在：未开通功能、权限不足

容易搞混？这样区分

开关 ≠ 勾选框 Checkbox

开关是拨一下立即生效的单一状态；勾选框是「从一组选项里勾几个」，通常还要配合提交。批量保存的场景用勾选框，立即生效的设置用开关。

开关 ≠ 按钮 Button

按钮是执行一次动作（保存、删除、发送），点完事情发生一次；开关是切换一个持续的状态（通知开/关），拨完状态一直保持。

看按钮

什么时候用得上

消息通知开关

拨一下立即生效，状态要真的存下来，刷新页面还在。

深色模式

拨动立即切换全局主题，滑块位置清晰表达当前模式。

自动续费

开关 + 一句说明（什么时候扣款）；关闭时先确认影响，不能一拨就关。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【范围】只改 [设置页] 的这些开关项，不动其他页面
【要求】
  - 把 [消息通知 / 深色模式 / 自动续费] 做成开关，拨动立即生效，刷新页面后状态保持（要真的存下来）
  - 每个开关有看得见的标签（如「消息通知」），开关状态用「滑块位置 + 颜色」双重区分，不只靠颜色
  - 键盘可用：Tab 聚焦、空格或回车切换
  - [自动续费] 关闭时要先确认，说明关闭后的影响，不能一拨就关
  - 这个页面没有「保存」按钮，所有开关都是立即生效的
【边界】不要新增第三方组件库；不要改页面其他设置项；危险操作（如删除数据）不要做成开关
【交付】告诉我改了哪些文件、我打开哪个页面拨哪个开关、刷新后状态还在不在、以及哪部分你没验证

这段话里最容易被偷懒的是「状态要真的存下来」和「危险操作不要做成开关」：AI 常把开关做成纯前端样子货，刷新就复位；或者顺手把删除也套成开关，一拨就执行。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

拨动开关，状态真的变了——视觉变了，实际效果也变了（不只是画了个样子）。
刷新页面，开关状态保持（它应该持久化的前提下）。
每个开关有清楚的标签文字，读屏也能念出「消息通知」而不是笼统的「开关」。
只用键盘：Tab 聚焦到开关，空格或回车能切换。
危险操作（删除、清空）不是用开关做的，有确认步骤。
页面上没有「保存」按钮、开关都是拨完立即生效；如果有保存按钮，开关拨完要有「未保存」提示。

它常这么糊弄你

「开关已加」——但只是画了个样子，点击没反应，或者刷新就复位。
状态区分只靠颜色——色弱用户分不出开还是关，滑块位置必须也变。
「删除所有数据」做成开关——一拨就删了，误触没救。
开关没名字，读屏念「开关」，用户不知道管的是啥。
页面有「保存」按钮还用开关——用户拨了以为生效，其实没保存，刷新全没。

开关能验到「主路径」层：亲手拨一遍、刷新一次、键盘走一遍，就验完了。状态是否持久化是这一条里最值得较真的点。

考考你选一个你觉得对的

哪个场景适合用开关？

想再深挖一点靠谱出处

Switch Pattern（开关模式）W3C WAI-ARIA APG ↗

# 开关 (Switch)

> 表示一个开/关状态的控件，拨一下立即生效，适合只有两档、马上起效的设置。

**你可能会这么说**：设置页里有个小开关，一拨就开一拨就关，比如「开启消息通知」「深色模式」。

开关（Switch）表示一个二选一的状态：开或关。它最典型的家是设置页——消息通知、深色模式、自动续费，拨一下立即生效，页面不用保存按钮。判断标准有两条：值只有两档，且拨完立即生效。两条都满足才用开关。 最常被用错的地方是把危险动作做成开关：「删除所有数据」用开关——一拨就删，没有确认机会，误触就没救。凡是有不可逆后果的操作，用「按钮 + 确认弹窗」，别用开关。第二个坑是状态区分只靠颜色：开是绿色关是灰色，色弱用户分不出来，开关要靠滑块位置变化表达状态，颜色只是辅助。第三个坑是开关没有名字：读屏用户听到「开关」，不知道管的是消息通知还是别的——每个开关必须有一个说人话的标签。 还有一类误用：页面有「保存」按钮却用开关。用户拨了开关没保存，以为生效了，刷新全没了。立即生效的设置才用开关；选完还要和其他字段一起提交的（比如「编辑资料」里的勾选），用勾选框，别用开关。

**也叫**：开关按钮、切换开关、Toggle、那个可以拨的东西、开和关

## 你可以这样告诉 AI

```text
【范围】只改 [设置页] 的这些开关项，不动其他页面
【要求】
  - 把 [消息通知 / 深色模式 / 自动续费] 做成开关，拨动立即生效，刷新页面后状态保持（要真的存下来）
  - 每个开关有看得见的标签（如「消息通知」），开关状态用「滑块位置 + 颜色」双重区分，不只靠颜色
  - 键盘可用：Tab 聚焦、空格或回车切换
  - [自动续费] 关闭时要先确认，说明关闭后的影响，不能一拨就关
  - 这个页面没有「保存」按钮，所有开关都是立即生效的
【边界】不要新增第三方组件库；不要改页面其他设置项；危险操作（如删除数据）不要做成开关
【交付】告诉我改了哪些文件、我打开哪个页面拨哪个开关、刷新后状态还在不在、以及哪部分你没验证
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 拨动开关，状态真的变了——视觉变了，实际效果也变了（不只是画了个样子）。
- [ ] 刷新页面，开关状态保持（它应该持久化的前提下）。
- [ ] 每个开关有清楚的标签文字，读屏也能念出「消息通知」而不是笼统的「开关」。
- [ ] 只用键盘：Tab 聚焦到开关，空格或回车能切换。
- [ ] 危险操作（删除、清空）不是用开关做的，有确认步骤。
- [ ] 页面上没有「保存」按钮、开关都是拨完立即生效；如果有保存按钮，开关拨完要有「未保存」提示。

常见糊弄：
- 「开关已加」——但只是画了个样子，点击没反应，或者刷新就复位。
- 状态区分只靠颜色——色弱用户分不出开还是关，滑块位置必须也变。
- 「删除所有数据」做成开关——一拨就删了，误触没救。
- 开关没名字，读屏念「开关」，用户不知道管的是啥。
- 页面有「保存」按钮还用开关——用户拨了以为生效，其实没保存，刷新全没。

来源：https://mickerbook.com/reference/t/switch/