Clarity Design · 协作产品 UI 设计语言

基本
分组
中间状态组件
受限组件
非受限组件
Checkbox 嵌套使用
无障碍

开发指南

何时使用

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

中间状态组件

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

ApplePearOrange

受限组件

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

上海北京广州深圳

非受限组件

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

上海北京广州

Checkbox 嵌套使用

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

无障碍

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

API

Checkbox

参数	说明	类型	默认值
id	checkbox id, 挂载在 input 上	String	-
size	checkbox 尺寸，有 large，medium 两种选择	String	'medium'
checked	选中状态	Boolean	-
defaultChecked	默认选中状态	Boolean	false
disabled	禁用	Boolean	-
label	通过属性配置 label，	ReactNode	-
indeterminate	Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性	Boolean	-
defaultIndeterminate	Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性	Boolean	false
onChange	状态变化时触发的事件签名: Function(checked: Boolean, e: Event) => void 参数: checked: {Boolean} 是否选中 e: {Event} Dom 事件对象	Function	func.noop
onMouseEnter	鼠标进入 enter 事件签名: Function(e: Event) => void 参数: e: {Event} Dom 事件对象	Function	func.noop
onMouseLeave	鼠标离开 Leave 事件签名: Function(e: Event) => void 参数: e: {Event} Dom 事件对象	Function	func.noop

Checkbox.Group

参数	说明	类型	默认值
disabled	整体禁用	Boolean	-
size	group 中 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	通过子元素方式设置内部 checkbox	Array<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	选择或取消当前项