开关

Switch

UI 组件也叫：开关按钮、切换开关、Toggle、拨动开关

一句话：像电灯开关一样的滑动小控件，表示某个功能开启或关闭，拨动后通常立即生效。

详细解释

开关是一个胶囊形轨道加一个圆形滑块：滑块在右边、轨道填色表示开，滑块在左边、轨道变灰表示关。它只有两种状态，而且和现实中的电灯开关一样，拨动后设置马上生效，不需要再点保存，比如「消息通知」「深色模式」「自动续费」。

它和 复选框 的区别主要在生效时机：开关立即生效，复选框通常在表单里等提交后才生效，所以需要点保存的表单里，「是否同意」这类项用复选框更合适。和 单选框 相比，开关只能表达开和关，不能表达三种以上的选择。切换需要请求服务器时，滑块上要显示加载中，失败了要自动弹回原状态并提示。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

设置页每一行左边是设置名称和一行灰色说明，右边是开关，比如「接收邮件通知」。打开时轨道为深色、滑块在右，关闭时轨道浅灰、滑块在左；拨动后立即调用接口保存，请求中滑块显示转圈，失败则弹回原状态并用轻提示报错。

由胶囊形轨道和可左右滑动的圆形滑块组成，旁边通常有设置名称，有的设计在轨道内显示开、关文字。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。