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 | number | "125" | "087" | ({ "@reducedMotion"?: number | "125" | "087"; "@sm"?: number | "125" | "087"; "@md"?: number | "125" | "087"; "@lg"?: number | "125" | "087"; "@xl"?: number | "125" | "087"; ... 19 more ...; "@initial"?: number | ... 1 more ... | "087"; } & { ...; }) | ---- | False | |
| disabled | boolean | ---- | False | |
| variant | "cta" | "secondary" | "primary" | ({ "@reducedMotion"?: "cta" | "secondary" | "primary"; "@sm"?: "cta" | "secondary" | "primary"; "@md"?: "cta" | "secondary" | "primary"; "@lg"?: "cta" | "secondary" | "primary"; ... 20 more ...; "@initial"?: "cta" | ... 1 more ... | "primary"; } & { ...; }) | ---- | False | |
| isOutline | boolean | "true" | "false" | ({ "@reducedMotion"?: boolean | "true" | "false"; "@sm"?: boolean | "true" | "false"; "@md"?: boolean | "true" | "false"; "@lg"?: boolean | "true" | "false"; ... 20 more ...; "@initial"?: boolean | ... 1 more ... | "false"; } & { ...; }) | ---- | False | |
| label | string | ---- | False | |
| name | string | ---- | False | |
| value | string | ---- | False | |
| defaultChecked | boolean | "indeterminate" | ---- | False | |
| id | string | ---- | True | |
| children | The correspoding label to the checkbox. Allows you to pass in more than just text | ReactNode | ---- | False |
| asChild | boolean | ---- | False | |
| checked | 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: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS... | ---- | False |
| required | boolean | ---- | False | |
| onCheckedChange | (checked: boolean | "indeterminate") => void | ---- | False |