mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
74492676f7
* fix: fix Checkbox.Group type * fix: fix Checkbox.Group type * fix: fix Checkbox.Group type * fix: remove type * fix: any
3.3 KiB
3.3 KiB
category | group | title | description | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | Data Entry | Checkbox | Collect user's choices. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G3MjTYXL6AIAAAAAAAAAAAAADrJ8AQ/original |
|
When To Use
- Used for selecting multiple values from several options.
- If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
Examples
Basic
Disabled
Controlled Checkbox
Checkbox Group
Check all
Use with Grid
Same line
Disabled to show Tooltip
customize lineWidth
API
Common props ref:Common props
Checkbox
Property | Description | Type | Default | Version |
---|---|---|---|---|
autoFocus | If get focus when component mounted | boolean | false | |
checked | Specifies whether the checkbox is selected | boolean | false | |
defaultChecked | Specifies the initial state: whether or not the checkbox is selected | boolean | false | |
disabled | If disable checkbox | boolean | false | |
indeterminate | The indeterminate checked state of checkbox | boolean | false | |
onChange | The callback function that is triggered when the state changes | (e: CheckboxChangeEvent) => void | - |
Checkbox Group
Property | Description | Type | Default | Version |
---|---|---|---|---|
defaultValue | Default selected value | (string | number)[] | [] | |
disabled | If disable all checkboxes | boolean | false | |
name | The name property of all input[type="checkbox"] children |
string | - | |
options | Specifies options | string[] | number[] | Option[] | [] | |
value | Used for setting the currently selected value | (string | number | boolean)[] | [] | |
onChange | The callback function that is triggered when the state changes | (checkedValue: T[]) => void | - |
Option
interface Option {
label: string;
value: string;
disabled?: boolean;
}
Methods
Checkbox
Name | Description | Version |
---|---|---|
blur() | Remove focus | |
focus() | Get focus | |
nativeElement | Returns the DOM node of the Checkbox | 5.17.3 |
Design Token
FAQ
Why not work in Form.Item?
Form.Item default bind value to value
property, but Checkbox value property is checked
. You can use valuePropName
to change bind property.
<Form.Item name="fieldA" valuePropName="checked">
<Checkbox />
</Form.Item>