Switch
开关
WebMobileDesktop上手难度: 容易
一个左右滑动的开关，一开一关，状态永远摆在明面上。
Live Demo
真的可以点你刚才看到的这个：设置页里「深色模式」「通知开关」那一行右端的滑块、iOS 设置里所有绿色的圆角开关、App 设置里的「自动播放视频」。
它到底是什么
Switch 传达的是「这个功能现在是开着的还是关着的」。它和 Checkbox 的区别是：Checkbox 是「勾了这个动作」，Switch 是「这个状态开着」。Checkbox 通常在提交时生效，Switch 立即生效。
开关switchtoggle切换开关拨动开关toggle switch
Anatomy · 它由什么组成
Track轨道
40×24px，开启时变主色
Thumb滑块
20px 圆，拖动时有阴影
Label文字
描述这个功能而非状态
State Label状态文字
可选，「开 / 关」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 一个功能的开/关状态，切换立即生效 | 用 |
| 状态需要一眼可见 | 用 |
| 开关状态本身有意义（开=省电模式） | 用 |
| 需要用户「确认后才生效」 | 不用 |
| 这个勾选需要随表单一起提交 | 视情况 |
Switch 不用解释「开」和「关」的意思——那说明它不适合用 Switch，改用 Checkbox + 明确文案。
切换后有重要后果（关掉会丢数据）时，Switch 本身要配合确认或 Undo。
Similar Patterns
别搞混一句话区分：一个左右滑动的开关，一开一关，状态永远摆在明面上。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个设置项：左侧标题「深色模式」+ 一行说明，右侧 Switch。切换立即生效并显示 Toast 确认。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个能开能关的东西。
改成这样说
加 Switch 设置项：role="switch" + aria-checked，44×26px 轨道、22px 滑块、切换立即生效并弹 Toast 确认，整行可点，不用 Checkbox 语义。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。