示例
直接操作示例,查看组件在具体任务中的状态与反馈。
可选权限
汇总状态
使用建议
每项选择彼此独立
Checkbox 适合零项或多项选择;若答案互斥,应使用 RadioGroup。
标签直接描述结果
标签应说明勾选后会发生什么,补充说明用于解释范围、条件或不可逆影响。
汇总状态不等于选中
indeterminate 只展示部分选择状态,真实集合仍由宿主根据子项变化维护。
引入方式
从已验证的公开子路径导入组件;全局样式接入方式见安装指南。
import { BaseCheckbox } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- indeterminate 是视觉与可访问状态,不会作为独立表单值提交;宿主必须维护并序列化真实选择集合。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseCheckboxProps
extends Omit<
InputHTMLAttributes<HTMLInputElement>,
'children' | 'className' | 'disabled' | 'style' | 'type'
> {
label?: ReactNode;
description?: ReactNode;
indeterminate?: boolean;
invalid?: boolean;
disabled?: boolean;
controlSize?: BaseControlSize;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseCheckboxClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
label | 复选框旁显示并参与点击区域的标签内容。 | ReactNode | — |
description | 用于补充标题或标签含义的说明内容。 | ReactNode | — |
indeterminate | 复选框是否显示部分选中的不确定状态。 | boolean | false |
invalid | 是否进入无效状态并应用相应的校验样式与语义。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
controlSize | 内部表单控件使用的预设尺寸。 | BaseControlSize | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseCheckboxClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |