组件 · 数据录入

Checkbox 复选框

布尔勾选控件;支持受控与非受控用法,状态不能只靠颜色传达。

入口 @selrux/ui/checkbox · 源码 src/components/checkbox/index.ts · 1 个组件 · 发布状态 preview

使用建议

  • 避免:只用颜色区分勾选状态而不提供可访问名称
  • 限制:未标 stable

引入

tsx
import { Checkbox, checkboxVariants } from '@selrux/ui/checkbox';

演练场

调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

配合原生 label 使用。

半选

indeterminate 表示部分选中,常用于全选。

状态与尺寸

disabled、invalid 与 size 六档。

API

属性覆盖:示例用到 6 / 6 个自有属性(100%)

由 scripts/demo-coverage.mjs 统计,不含 className / style / 原生透传属性与纯转发事件。

Checkbox

带样式的复选。ref 仍指向原生 input。

属性说明类型默认值
checked受控选中。boolean-
defaultChecked与 checked 互斥。boolean-
indeterminate混合状态。 只影响 aria-checked 与原生 indeterminate。表单仍只提交 checked 对应的值。boolean-
invalid错误状态。 为真时设置 aria-invalid,不渲染错误文案。显式 aria-invalid 优先。 说明节点的 id 由调用方通过 aria-describedby、aria-errormessage 传入。boolean-
onCheckedChange选中变化。 在原生 onChange 之后调用,参数为浏览器已经切换后的 checked。((checked: boolean) => void)-
size尺寸。省略时使用 ConfigProvider,无配置时为 md。"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-

另有 305 项原生属性与事件继承自 HTMLAttributes / InputHTMLAttributes,原样透传。

导出类型:CheckboxProps、CheckboxSize、CheckboxVariantOptions

函数与常量

名称说明签名 / 类型
checkboxVariants组合基础类、尺寸和可选附加类。(options?: CheckboxVariantOptions) => string

无障碍

摘自源码 JSDoc。

  • 只影响 aria-checked 与原生 indeterminate。
  • 为真时设置 aria-invalid,不渲染错误文案。
  • 显式 aria-invalid 优先。
  • 说明节点的 id 由调用方通过 aria-describedby、aria-errormessage 传入。