Checkbox 复选框
让用户独立选择一个布尔选项,并支持部分选中的三态表达。
使用概览
适合使用
- 多个选项可以分别开启,或需要表示子项部分选中时。
不建议使用
- 一组选项只能选择一项,或操作切换后立即影响整个系统时。
真实示例
服务条款复选框
提交前要求用户明确勾选同意条款。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/checkbox.json基础用法
导入
import { Checkbox } from "@richardqiu/quartz/checkbox";JSX
<label><Checkbox name="terms" required /> 我已阅读服务条款</label>状态与控制摘要
默认
悬停
键盘焦点可见
已禁用
无效
未勾选
已勾选
不确定
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
checked | boolean | "indeterminate" | false | 受控表示未选、已选或部分选中的状态。 |
组合结构
- 01
Checkbox
键盘约定
- 控件可用时,空格键切换勾选状态。
可访问性契约
- 每个复选框都需要可见标签或可访问名称。
- 原生表单语义与 indeterminate 混合状态保持可感知。