表单组件版本 0.1.0

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

API 参考

属性类型默认值说明
checkedboolean | "indeterminate"false受控表示未选、已选或部分选中的状态。

组合结构

  1. 01Checkbox

键盘约定

  • 控件可用时,空格键切换勾选状态。

可访问性契约

  • 每个复选框都需要可见标签或可访问名称。
  • 原生表单语义与 indeterminate 混合状态保持可感知。