2016-08-18 11:22:55 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Data Entry
2016-08-18 11:22:55 +08:00
title: Checkbox
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G3MjTYXL6AIAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-08-18 11:22:55 +08:00
---
2018-07-20 23:22:40 +08:00
Checkbox component.
2016-08-18 11:22:55 +08:00
## 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.
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/disabled.tsx" > Disabled< / code >
< code src = "./demo/controller.tsx" > Controlled Checkbox< / code >
< code src = "./demo/group.tsx" > Checkbox Group< / code >
< code src = "./demo/check-all.tsx" > Check all< / code >
< code src = "./demo/layout.tsx" > Use with Grid< / code >
< code src = "./demo/debug-line.tsx" debug > Same line< / code >
2022-12-26 23:35:18 +08:00
< code src = "./demo/debug-disable-popover.tsx" debug > Disabled to show Tooltip< / code >
2022-11-09 12:28:04 +08:00
2016-08-18 11:22:55 +08:00
## API
2018-06-03 16:28:10 +08:00
#### Checkbox
2016-08-18 11:22:55 +08:00
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2020-06-30 15:39:12 +08:00
| 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 | |
2023-02-05 11:13:38 +08:00
| onChange | The callback function that is triggered when the state changes | (e: CheckboxChangeEvent) => void | - | |
2016-08-18 11:22:55 +08:00
2018-06-03 16:28:10 +08:00
#### Checkbox Group
2016-08-18 11:22:55 +08:00
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2022-12-06 21:09:59 +08:00
| defaultValue | Default selected value | (string \| number)\[] | \[] | |
2020-06-30 15:39:12 +08:00
| disabled | If disable all checkboxes | boolean | false | |
2019-11-20 14:54:38 +08:00
| name | The `name` property of all `input[type="checkbox"]` children | string | - | |
2022-01-12 22:57:43 +08:00
| options | Specifies options | string\[] \| number\[] \| Option\[] | \[] | |
2022-12-06 21:09:59 +08:00
| value | Used for setting the currently selected value | (string \| number)\[] | \[] | |
2023-02-05 11:13:38 +08:00
| onChange | The callback function that is triggered when the state changes | (checkedValue: CheckboxValueType[]) => void | - | |
##### Option
```typescript
interface Option {
label: string;
value: string;
disabled?: boolean;
}
```
2017-12-01 19:28:41 +08:00
2018-06-03 16:28:10 +08:00
### Methods
2017-12-01 19:28:41 +08:00
2018-06-03 16:28:10 +08:00
#### Checkbox
2017-12-01 19:28:41 +08:00
2022-01-12 22:57:43 +08:00
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | Remove focus | |
| focus() | Get focus | |