vocab.design

component · forms · selection

Checkbox

also called tick box (community), check box (community), checkboxes (govuk)

A square control that turns one independent option on or off, used in sets where any number of the options may be chosen.

A checkbox asks one closed question about one option, and its answer has no bearing on the boxes around it. That independence is the whole of the term: a set of five checkboxes has thirty-two legal answers, including none of them. A single checkbox is legitimate too (agreeing to terms, remembering a login), which is why the control cannot be defined by the set it usually appears in. The label belongs to the box, sits after it, and is part of what you can click.

Because the answer is per option, the choice is normally not applied until something commits it. That expectation, more than the shape, is what separates the checkbox from a switch: a switch acts the moment it moves, a checkbox waits for Save, Apply, or Export. Reaching for a checkbox and then firing the change instantly is the most common way the two get crossed.

The third state is real. When a parent box governs a group, aria-checked="mixed" (the indeterminate property in HTML) says some, but not all, and it is drawn as a bar rather than a half-drawn check. Mixed is a state a checkbox reports, never one a person can choose: clicking a mixed box completes the set or empties it. It is also purely visual in HTML, set only from script, and never submitted.

The misnomers are mostly about the wrong cardinality. A set where exactly one answer is allowed is a radio group drawn with the wrong glyph, and readers will trust the square over your instructions. “Tick box” is British usage for the same control, “check box” is the older two-word spelling, and GOV.UK names its component in the plural (“checkboxes”) because its guidance is about the set. Calling a selectable chip or a toggle button a checkbox loses the one promise the square makes: this option, on or off, by itself.

Which word?

If you wantsay
each option is independently on or offcheckbox
a setting that takes effect immediatelyswitch
a parent box stands over a partly checked groupmixed state checkbox
one of several, each option labelled and visibleradio group

Implementations

Specimens illustrate the concept; for production use, start here.

aria-apgCheckbox
materialCheckbox
fluentCheckbox
carbonCheckbox
polarisCheckbox
radixCheckbox
base-uiCheckbox
shadcnCheckbox

Sources