Checkbox 复选框 #

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

获取组件 #

演示 #

默认 #

禁用与只读 #

不确定状态 #

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

颜色 #

复选框分组 #

复选框组水平布局 #

受控的复选框组 #

可访问性 #

ARIA 属性 #

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

键盘交互 #

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

Props #

type ValueType = string | number;

<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> #

ts:Color #

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