@hi-ui/checkbox

Checkbox 复选

复选是用来在一组平铺选项中同时选择 1 个以上的选项

何时使用

需要快速完成多选一且备选项数量不多时

常见于后台设置、调研问卷、表单等场景

使用示例

Props

Checkbox

参数	说明	类型	可选值	默认值
autoFocus	是否自动获取焦点	boolean	true | false	false
checked	是否选中	boolean	true | false	false
defaultChecked	是否默认选中	boolean	true | false	false
disabled	是否禁用	boolean	true | false	false
indeterminate	不全选的样式控制	boolean	true | false	false

Checkbox.Group

参数	说明	类型	可选值	默认值
placement	排列方式	string	'horizontal' | 'vertical'	'horizontal'
data	指定可选项	ReactText[] | DataItem[]	-	[]
defaultValue	默认选中的项	ReactText[]	-	[]
disabled	是否禁用	boolean	true | false	false
name	CheckboxGroup 下所有 input[type="checkbox"] 的 name 属性	string	-	-
onChange	变化时的回调	(checkedList: ReactText[]) => void	-	-
value	指定选中的项	ReactText[]	-	-

Events

Checkbox

名称	说明	类型	参数	返回值
onChange	变化时的回调	(event: React.ChangeEvent<HTMLInputElement>) => void	event: input 事件对象	-

Checkbox.Group

名称	说明	类型	参数	返回值
onChange	变化时的回调	(checkedIds: ReactText[]) => void	checkedIds: 选中项 ID 集合	-

Type

DataItem

参数	说明	类型
id	选项唯一标识 id	ReactText
title	选项显示内容	ReactNode
disabled	是否禁用该选项	boolean

CHANGELOG

参数	变更类型	变更内容	解决的问题
propName	feature | deprecated | update	变更了什么	之前是什么样子，解决什么问题
----	----	----	----
children	feature	CheckboxGroup 支持内嵌 Checkbox	实现灵活的布局
data	deprecated	只支持 DataItem[] 模型数据	1. 规范统一；2. ReactText[] 用法接受度不高
title	feature	1. 字段：content -> title; 2. 类型：string -> ReactNode	1. 强化类型支持