Checkbox 复选框 #

复选框在表单中通常成组使用。允许用户从一组中选择一个或者多个值。

获取组件 #

演示 #

默认 #

禁用与只读 #

使用 disabled 属性禁用复选框或使用 readOnly 使其为只读状态，防止用户交互。

不确定状态 #

使用 indeterminate 属性可以将 Checkbox 设置为不确定状态，主要用在全选或者树形结构 Checkbox 上。

颜色 #

使用 color 属性自定义复选框颜色。支持预设主题颜色。

复选框分组 #

使用 <CheckboxGroup> 管理一组复选框。value 属性控制哪些选项被选中。

水平布局 #

向 <CheckboxGroup> 添加 inline 属性，使复选框水平排列而非垂直排列。

受控的复选框组 #

使用 value 和 onChange 属性管理复选框组状态，实现受控组件行为。

可访问性 #

ARIA 属性 #

• 复选框组的 role 属性为 group。
• 每一个复选框的 role 属性为 checkbox。
• 如果复选框禁用，则将 aria-disabled 设置为 true。
• 如果复选框选中，则将 aria-checked 设置为 true，否则设置为 false。
• 当部分选中时，aria-checked 设置为 mixed。
• 由 aria-labelledby 引用的可见标签设置在具有 role 为 checkbox 的元素上。

键盘交互 #

• 当复选框获得焦点时，按下 Space 键改变复选框的状态。

Props #

<Checkbox> #

属性名称	类型 (默认值)	描述	版本
as	ElementType(div)	为组件自定义元素类型
checked	boolean	被选择（受控）
color	Color	选中或不确定状态时的颜色
defaultChecked	boolean	默认被选择
disabled	boolean	禁用
indeterminate	boolean	作为一个全选框时，子项部分被选择后的样式设置
inputRef	Ref	HTML input 元素
name	string	用于表单对应的名称
onChange	(value: string | number, checked: boolean, event) => void	checked 状态发生改变的回调函数
title	string	HTML title
value	string | number	值，对应 CheckboxGroup 的值，判断是否选中

<CheckboxGroup> #

类型定义 #

Color #

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';