ant-design/components/checkbox/index.zh-CN.md

category, group, title, subtitle, description, cover, coverDark, demo

category	group	title	subtitle	description	cover	coverDark	demo
Components	数据录入	Checkbox	多选框	收集用户的多项选择。	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G3MjTYXL6AIAAAAAAAAAAAAADrJ8AQ/original	cols 2

何时使用

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

代码演示

基本用法 不可用 受控的 Checkbox Checkbox 组 全选 布局 自定义语义结构的样式和类 同行布局 禁用下的 Tooltip 自定义 lineWidth

API

通用属性参考：通用属性

Checkbox

参数	说明	类型	默认值	版本
checked	指定当前是否选中	boolean	false
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>	-
defaultChecked	初始是否选中	boolean	false
disabled	失效状态	boolean	false
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	false
onChange	变化时的回调函数	(e: CheckboxChangeEvent) => void	-
onBlur	失去焦点时的回调	function()	-
onFocus	获得焦点时的回调	function()	-
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-

Checkbox.Group

参数	说明	类型	默认值	版本
defaultValue	默认选中的选项	(string | number)[]	[]
disabled	整组失效	boolean	false
name	CheckboxGroup 下所有 input[type="checkbox"] 的 name 属性	string	-
options	指定可选项	string[] | number[] | Option[]	[]
value	指定选中的选项	(string | number | boolean)[]	[]
title	选项的 title	string	-
className	选项的类名	string	-	5.25.0
style	选项的样式	React.CSSProperties	-
onChange	变化时的回调函数	(checkedValue: T[]) => void	-

Option

interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}

方法

Checkbox

名称	描述	版本
blur()	移除焦点
focus()	获取焦点
nativeElement	返回 Checkbox 的 DOM 节点	5.17.3

Semantic DOM

主题变量（Design Token）

FAQ

为什么在 Form.Item 下不能绑定数据？

Form.Item 默认绑定值属性到 value 上，而 Checkbox 的值属性为 checked。你可以通过 valuePropName 来修改绑定的值属性。

<Form.Item name="fieldA" valuePropName="checked">
  <Checkbox />
</Form.Item>