Checkbox Demos

多选框。

何时使用 #

在一组可选项中进行多项选择时；
单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

参数	说明	类型	默认值	支持版本
className	自定义类名	string	-	-
id	checkbox id, 挂载在 input 上	string	-	-
style	自定义内联样式	React.CSSProperties	-	-
checked	选中状态	boolean	-	-
value	checkbox 的 value	ValueItem	-	-
name	name	string	-	-
defaultChecked	默认选中状态	boolean	false	-
disabled	禁用	boolean	-	-
label	通过属性配置 label，	React.ReactNode	-	-
indeterminate	Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性	boolean	-	-
defaultIndeterminate	Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性	boolean	false	-
onChange	状态变化时触发的事件	(checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void	-	-
onMouseEnter	鼠标进入 enter 事件	(e: React.MouseEvent<HTMLInputElement \| HTMLLabelElement>) => void	-	-
onMouseLeave	鼠标离开 Leave 事件	(e: React.MouseEvent<HTMLInputElement \| HTMLLabelElement>) => void	-	-
isPreview	是否为预览态	boolean	false	1.19
renderPreview	预览态模式下渲染的内容签名: 参数: checked: 是否选中 props: 所有传入的参数返回值: 定制渲染内容	(checked: boolean, props: CheckboxProps) => React.ReactNode	-	1.19

参数	说明	类型	默认值	支持版本
className	自定义类名	string	-	-
style	自定义内联样式	React.CSSProperties	-	-
disabled	整体禁用	boolean	-	-
dataSource	可选项列表	Array<ValueItem> \| Array<CheckboxData>	-	-
value	被选中的值列表	ValueItem[] \| ValueItem	-	-
defaultValue	默认被选中的值列表	ValueItem[] \| ValueItem	-	-
name	name	string	-	-
children	通过子元素方式设置内部 checkbox	React.ReactNode	-	-
onChange	选中值改变时的事件	(value: ValueItem[], e: React.ChangeEvent<HTMLInputElement>) => void	-	-
direction	子项目的排列方式	'hoz' \| 'ver'	-	-
itemDirection	[废弃] 子项目的排列方式	'hoz' \| 'ver'	-	-
isPreview	是否为预览态	boolean	-	1.19
renderPreview	预览态模式下渲染的内容签名: 参数: previewed: 预览值 [{label: '', value:''},...] props: 所有传入的参数返回值: 定制渲染内容	( previewed: { label: string \| React.ReactNode; value: string \| React.ReactNode; }[], props: object ) => React.ReactNode	-	1.19

export type ValueItem = string | number | boolean;

export type CheckboxData = {
    value: ValueItem;
    label?: React.ReactNode;
    disabled?: boolean;
    [propName: string]: unknown;
};

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