Switch 开关
立即开启或关闭一个持久设置,并清楚反映当前状态。
使用概览
适合使用
- 通知、同步或显示偏好切换后会立即生效时。
不建议使用
- 更改需要提交表单确认,或选项并非简单的开关状态时。
真实示例
通知偏好开关
立即切换是否接收工作区通知。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/switch.json基础用法
导入
import { Switch } from "@richardqiu/quartz/switch";JSX
<label><Switch name="notifications" defaultChecked /> 接收通知</label>状态与控制摘要
默认
悬停
键盘焦点可见
已禁用
无效
未勾选
已勾选
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
checked | boolean | false | 受控表示设置当前处于开启还是关闭状态。 |
组合结构
- 01
Switch
键盘约定
- 控件可用时,空格键切换开关状态。
可访问性契约
- 可访问名称应描述设置本身,而不是点击动作。
- 保留原生 name、value、required 与 disabled 表单语义。