表单组件版本 0.1.0

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 · boolean

API 参考

属性类型默认值说明
checkedbooleanfalse受控表示设置当前处于开启还是关闭状态。

组合结构

  1. 01Switch

键盘约定

  • 控件可用时,空格键切换开关状态。

可访问性契约

  • 可访问名称应描述设置本身,而不是点击动作。
  • 保留原生 name、value、required 与 disabled 表单语义。