Checkbox 复选按钮

开发指南

多选框

何时使用

复选框允许用户从一个数据集中选择多个选项。如果在一个列表中有多个选项,你可以通过使用复选框而不是开/关切换来节省空间。如果你有一个单选项,不要用复选框,使用开/关切换。

Different status without label:







Using with label

 

Large size


基本

使用 Checkbox 渲染的基本组件。

Horizonal direction

Vertical direction

分组

使用 <Checkbox.Group> 渲染 <Checkbox> 分组。











中间状态组件

通过使用 indeterminate 来渲染中间状态的组件。

受限组件

使用 CheckboxGroup 渲染的组,通过设置 value 属性可以让组件变成受限组件

非受限组件

使用 CheckboxGroup 渲染的组,通过设置 defaultValue 属性可以让组件变成非受限组件

Checkbox 嵌套使用

使用 CheckboxGroup,通过直接嵌套 Checkbox 组件来渲染的组。

Programming language:

无障碍

通过aria-labelCheckbox组件进行描述。关于键盘操作请参考ARIA and KeyBoard

API

Checkbox

参数说明类型默认值
idcheckbox id, 挂载在 input 上String-
sizecheckbox 尺寸,有 large,medium 两种选择String'medium'
checked选中状态Boolean-
defaultChecked默认选中状态Booleanfalse
disabled禁用Boolean-
label通过属性配置 label,ReactNode-
indeterminateCheckbox 的中间状态,只会影响到 Checkbox 的样式,并不影响其 checked 属性Boolean-
defaultIndeterminateCheckbox 的默认中间态,只会影响到 Checkbox 的样式,并不影响其 checked 属性Booleanfalse
onChange状态变化时触发的事件

签名:
Function(checked: Boolean, e: Event) => void
参数:
checked: {Boolean} 是否选中
e: {Event} Dom 事件对象
Functionfunc.noop
onMouseEnter鼠标进入 enter 事件

签名:
Function(e: Event) => void
参数:
e: {Event} Dom 事件对象
Functionfunc.noop
onMouseLeave鼠标离开 Leave 事件

签名:
Function(e: Event) => void
参数:
e: {Event} Dom 事件对象
Functionfunc.noop

Checkbox.Group

参数说明类型默认值
disabled整体禁用Boolean-
sizegroup 中 checkbox 的尺寸,有 large,medium 两种选择,当使用 dataSource 时生效String'medium'
dataSource可选项列表, 数据项可为 String 或者 Object, 如 ['apple', 'pear', 'orange'] 或者 [{value: 'apple', label: '苹果',}, {value: 'pear', label: '梨'}, {value: 'orange', label: '橙子'}]Array<any>[]
value被选中的值列表Array/String/Number-
defaultValue默认被选中的值列表Array/String/Number-
children通过子元素方式设置内部 checkboxArray<ReactElement>-
onChange选中值改变时的事件

签名:
Function(value: Array, e: Event) => void
参数:
value: {Array} 选中项列表
e: {Event} Dom 事件对象
Function() => {}
itemDirection子项目的排列方式
- hoz: 水平排列 (default)
- ver: 垂直排列

可选值:
'hoz', 'ver'
Enum'hoz'

ARIA and KeyBoard

按键说明
SPACE选择或取消当前项