Anatomy
Note: Image is not to scale
- Icon
- Background Fill
- Border
Options
Size
There are two sizes available 125 & 087.
Variant
There are 3 variants available primary secondary & cta.
Style
There are 2 styles available fill & outline.
Check states
A checkbox state can be true, false or indeterminate.
Behavior
Disabled
Focus
Guidance
When to use indeterminate state
When checkbox are in a group the parent checkbox will reflect the group status of the checkbox.
Click/Tap targets
The click/tap target should include the label and control the checkbox.
API Reference
Checkbox
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| size | enum number | 087 | 125 | ---- | False | |
| variant | enum primary | secondary | cta | ---- | False | |
| isOutline | enum boolean | true | false | ---- | False | |
| label | string | ---- | False | |
| disabled | enum boolean | ---- | False | |
| name | string | ---- | False | |
| value | string | ---- | False | |
| defaultChecked | enum boolean | indeterminate | ---- | False | |
| id | string | ---- | False | |
| asChild | enum boolean | ---- | False | |
| checked | enum boolean | indeterminate | ---- | False | |
| required | enum boolean | ---- | False | |
| onCheckedChange | (checked: boolean | "indeterminate") => void | ---- | False |