Forms and settings

Checkbox

components/ui/checkbox

Checked, cleared and mixed, with a tick that draws itself.

Craft notes

The tick draws itself with a stroke dash while the box springs to 110%
The tick sound pitches up when checked and down when cleared
The mixed state draws a dash and reports aria-checked="mixed"

Play it

Tick all three tasks, then clear them from the parent row. Listen for the pitch dropping on the way out.

Sounds: tick

Variants

Every prop combination the component supports. The chip on each card is the exact props it passes.

Unchecked
checked={false}
The resting state.
Checked
checked
Selected, with the tick drawn.
Mixed
checked="mixed"
Some children are checked and some are not.
Strike
strike
For task lists: the label strikes through and fades once done.
Disabled
disabled
Visible but not available.