Checkbox
NewA box to tick: one of several independent choices, a row to act on in a table, or a setting that applies when the form is saved. A real checkbox underneath, with a tick that draws itself in.
Playground
<Checkbox
label="Track stock"
description="Count units down as orders come in."
checked
/>States
Unticked, ticked and part-ticked (checked="indeterminate", for a parent whose children are mixed). Hover firms the edge; pressing sinks the box a little.
With a description
A quieter second line explains the consequence. It is linked to the box for screen readers.
Select all
A parent box over a group shows part-ticked while its children are mixed. Ticking it ticks them all; unticking clears them.
In a table
Without a label, give the box an aria-label that names the row ("Select order #1043"). See Table for row selection.
In both themes
Guidelines
- Write the label as the thing that is true when ticked: "Track stock", not "Don't track stock".
- Put the box before its label, and keep groups in a column so the boxes line up.
Accessibility
- A native checkbox: Space toggles it, forms submit it, screen readers announce it. Part-ticked is announced as mixed.
- The label is the accessible name, and clicking it ticks the box. The description is linked with aria-describedby.
- The hit area is at least 24px square, even at the 14px size.
- Focus shows a teal ring round the box. With reduced motion the tick appears without drawing in.
Props
Also accepts every native input attribute (name, value, required, aria-label).
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | 'indeterminate' | None | Controlled state. |
defaultChecked | boolean | false | Starting state when uncontrolled. |
onCheckedChange | (checked: boolean) => void | None | Called with the new state. |
label | ReactNode | None | Text to the right; the accessible name. |
description | ReactNode | None | A quieter second line under the label. |
size | 'sm' | 'md' | 'md' | 14 or 16px box. |
disabled | boolean | false | Cannot be changed; drops to 45%. |
| Use | Instead of |
|---|---|
| Several independent choices, applied on save | Checkbox |
| One setting that applies straight away | Switch |
| One choice out of a few | Segmented control |