Checkbox 复选框

在一组彼此独立的选项中选择零项或多项。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

宿主持有可公开内容集合;汇总项只反映真实选择,业务数据始终不可选。
可选权限
同步范围
汇总状态
当前同步范围:组件代码
汇总项根据子项数量显示未选、部分选择或全选状态。
已选择 1 项。
三种尺寸与相邻表单控件保持一致的触达密度。
错误状态要求用户补充确认,禁用状态说明选项由上游策略锁定。

使用建议

每项选择彼此独立

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.
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复选框是否显示部分选中的不确定状态。booleanfalse
invalid是否进入无效状态并应用相应的校验样式与语义。booleanfalse
disabled是否禁用该组件及其可交互行为。booleanfalse
controlSize内部表单控件使用的预设尺寸。BaseControlSize
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance
className追加到组件根元素的 CSS 类名。string
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseCheckboxClassNames
style追加到组件根元素的内联样式。CSSProperties