Component docs
Checkbox
Binary or mixed choice with label, hint and error support.
When to use
- Use for independent options or a single agreement.
- Use `indeterminate` for a parent that controls a partially selected group.
- Keep labels positive (“Email me updates”), not double negatives.
Playground
Change props on the right; the preview and code update instantly.
<Checkbox label="Email me product updates" checked />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Clickable label. |
hint | string | — | Helper text linked via aria-describedby. |
error | string | — | Error message; sets aria-invalid. |
indeterminate | boolean | false | Mixed state; sets aria-checked="mixed". |
checked / defaultChecked | boolean | — | Controlled / uncontrolled state. |
disabled | boolean | false | Native disabled state. |
containerClassName | string | — | Class for the outer wrapper. |
Keyboard navigation
| Keys | Behavior |
|---|---|
| Tab / Shift+Tab | Move focus to / from the box. |
| Space | Toggle checked. |
| Clicking the label | Toggles the box. |
ARIA attributes
| Attribute | Guidance |
|---|---|
aria-checked="mixed" | Set automatically for `indeterminate`. |
aria-describedby | Links hint and error text. |
aria-invalid | Set automatically when `error` is present. |
role="group" + aria-labelledby | Wrap related checkboxes in a fieldset/legend or labelled group. |
Theme tokens
Every part of Checkbox reads from these tokens, so it re-themes in light and dark automatically.
| Part | Tokens |
|---|---|
| Box | --surface-raised--border-strong--radius-xs--space-5--border-width |
| Box (checked / mixed) | --primary--primary-foreground--border-width-thick |
| Box (error) | --destructive |
| Label & hint | --foreground--muted-foreground--text-sm--weight-medium--text-caption |
| Focus ring | --focus-ring--focus-ring-width--focus-ring-offset |
| Hit area & motion | --target-min--duration-fast--ease-standard--opacity-disabled |
Accessibility checklist
0 of 5 verified
Check contrast numbers live on the Accessibility page.