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
Required
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.
Custom labels
You may want different styles applied to your labels.
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 | ---- | True | |
| children | The correspoding label to the checkbox. Allows you to pass in more than just text | enum ReactNode | ---- | False |
| asChild | enum boolean | ---- | False | |
| checked | enum boolean | indeterminate | ---- | False | |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s... | ---- | False |
| required | enum boolean | ---- | False | |
| onCheckedChange | (checked: boolean | "indeterminate") => void | ---- | False |