Toggle switch 开关

/TOG-ul SWISH/ · noun · 输入类模式 · #046

单个设置的即时开/关。如果改动不是立刻生效,那它应该是个复选框。

Toggle switch(开关) UI 模式示例:CatchUI 图鉴标本

你可能会这样叫它

  • “开关按钮”
  • “设置里的绿色开关”
  • “左右滑动的开关”
  • “打开 / 关闭的按钮”
  • “胶囊形状的开关”

……它的名字是 开关(Toggle switch)。

常见问题

开关和复选框该用哪个?

拨动后立即生效的设置(比如打开 Wi-Fi)用开关;要等点“保存”或“提交”才生效的选择,或者表单里可以多选的选项,用复选框。

代码里叫什么

SwiftUIToggle
UIKitUISwitch
Jetpack ComposeSwitch
Android (Views)MaterialSwitch
FlutterSwitch CupertinoSwitch
Web (HTML / ARIA)<input type="checkbox" role="switch">

复制给 AI 编程工具

为这个设置加一个开关(Toggle switch):胶囊形轨道加圆形滑块,左侧有可见的文字标签,拨动后立即生效,不需要“保存”按钮。开和关不能只靠颜色区分(还要有滑块位置,空间允许时加图标或文字)。整行都可以点击,并让读屏软件识别为带开关状态的开关控件(网页上用 role="switch")。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)