Importimport { Checkbox } from "antd"; |
Sourcecomponents/checkbox |
Importimport { Checkbox } from "antd"; |
Sourcecomponents/checkbox |
Common props ref：Common props
| 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 | - | |
| onBlur | Called when leaving the component | function() | - | |
| onFocus | Called when entering the component | function() | - |
| 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)[] | [] | |
| title | title of the option | string | - | |
| className | className of the option | string | - | 5.25.0 |
| style | styles of the option | React.CSSProperties | - | |
| onChange | The callback function that is triggered when the state changes | (checkedValue: T[]) => void | - |
interface Option {label: string;value: string;disabled?: boolean;}
| Name | Description | Version |
|---|---|---|
| blur() | Remove focus | |
| focus() | Get focus | |
| nativeElement | Returns the DOM node of the Checkbox | 5.17.3 |
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>
Basic usage of checkbox.
Communicated with other components.
The indeterminate property can help you to achieve a 'check all' effect.
Disabled checkbox.
Generate a group of checkboxes from an array.
We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.
