跳到主要内容
Termlib

UI 组件 · 表单输入

开关

Switch

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

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

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

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

发给

01判断

你的内容是这样吗？

对照两列，确认开关是不是你要找的。

符合这些情况，用开关

  • 设置页里开启或关闭某个功能，并且切换后立即生效
  • 只有开和关两种状态的选项，比如消息通知、深色模式、自动播放
  • 列表或表格里单条记录的启用和停用，比如上架、下架某个商品

是这些情况，换成别的

  • 需要填完整个表单再点提交才生效的选项，比如同意协议

    改用复选框

  • 有三种及以上选项时

    改用单选框分段控制器

  • 需要一次选中多个选项时，应该用复选框组

    改用复选框

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    放在需要点保存的表单里，用户拨动后以为已经生效，没保存就离开了

  2. 02

    开和关两种状态颜色差别太小，看不出当前是开还是关

  3. 03

    旁边文字写成「开启通知」这种动作描述，用户分不清现在到底是开还是关

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

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

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1胶囊形的小轨道，里面有一个圆形滑块
  2. 2滑块在右侧且轨道有填充色表示开，在左侧且轨道灰色表示关
  3. 3常出现在设置列表每一行的最右侧

04解释

详细解释

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

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

开发者信息
术语 ID
component-switch
DOM 选择器

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

  • [role="switch"]
  • .ant-switch
  • .el-switch
  • [class*="MuiSwitch-root"]
  • .arco-switch
  • .t-switch
  • .n-switch
  • [data-slot="switch"]
  • .form-switch
  • label.switch
  • .switch:has(input[type="checkbox"])
  • .toggle:has(> input[type="checkbox"])
  • .toggle-switch
  • label:has(> input[type="checkbox"] + .slider)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • switch
  • toggle-switch
  • switch-toggle
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Switch
  • Toggle
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30