ant-design/components/checkbox/index.zh-CN.md
二货爱吃白萝卜 c7a09284d4
docs: add faq about valuePropName (#44609)
* docs: add faq about valuePropName

* docs: more info

* docs: clean up
2023-09-04 14:10:39 +08:00

2.8 KiB
Raw Blame History

category subtitle group title 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

API

通用属性参考:通用属性

Checkbox

参数 说明 类型 默认值 版本
autoFocus 自动获取焦点 boolean false
checked 指定当前是否选中 boolean false
defaultChecked 初始是否选中 boolean false
disabled 失效状态 boolean false
indeterminate 设置 indeterminate 状态,只负责样式控制 boolean false
onChange 变化时的回调函数 (e: CheckboxChangeEvent) => void -

Checkbox Group

参数 说明 类型 默认值 版本
defaultValue 默认选中的选项 (string | number)[] []
disabled 整组失效 boolean false
name CheckboxGroup 下所有 input[type="checkbox"]name 属性 string -
options 指定可选项 string[] | number[] | Option[] []
value 指定选中的选项 (string | number | boolean)[] []
onChange 变化时的回调函数 (checkedValue: CheckboxValueType[]) => void -
Option
interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}

方法

Checkbox

名称 描述 版本
blur() 移除焦点
focus() 获取焦点

主题变量Design Token

FAQ

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

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

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