COMPONENT 31 · Selection & Values
开关
Switch
也叫Toggle SwitchToggle切换开关NSSwitch
立即在开与关两种状态间切换设置。
Immediately toggles a setting between on and off states.
ANATOMY & USAGE
结构与使用建议
组成部分
- 轨道
- 滑块
- 状态标签
适合使用
- 改变会立即生效且只有开关两种状态时。
不建议使用
- 需要用户确认提交或表示同意条款时。
键盘与无障碍
- 提供不随状态改变的标签并暴露 checked 状态；不能只用颜色表示开关。
DESCRIBE IT TO AI
这样告诉编程助手
实现开关（Switch）：立即在开与关两种状态间切换设置。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<label class="demo row">
<input type="checkbox" role="switch"> 开启通知</label>