Checkbox

Also called tick box, check control, multi-select box

A form control holding a boolean value, optionally indeterminate, submitted with the rest of the form.

Example

Parent state: checked=false · indeterminate=true

Some but not all — the parent is neither ticked nor empty, and a screen reader reads it as “mixed”. This state has no HTML attribute; it only exists as a DOM property.

Every checkbox here is its own tab stop — five in this group. That is the keyboard difference from a radio group, where the whole group is one stop and the arrow keys move within it.

When to use it

The value is collected now and applied on submit — terms accepted, options ticked, rows selected.
Several independent options can all be on at once. A group of checkboxes says “any of these”.
You need a parent that reflects its children: all, none, or some.

When not to

The change applies immediately. That is a switch, and dressing it as a checkbox hides when it takes effect.
Exactly one option must be chosen. That is a radio group — checkboxes let someone tick two and then argue with your validation.
There is one option and it is a setting rather than a form value. A lone checkbox in a settings panel is usually a switch in disguise.

Trade-offs

Supports three states, which is the only clean way to model a select-all over a partial selection.
Groups naturally: several independent yes/no answers read as one block.
Deferred by nature, so nothing happens until the user commits.

Nothing signals when the change applies, so a checkbox with no visible Save is genuinely confusing.
Long lists of checkboxes are hard to scan and easy to mis-tick.
Negative labels — “Do not send me email” — invert the meaning of a tick and are misread constantly.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard: Space toggles. Each checkbox in a group is its own tab stop, unlike radios.
The label must be clickable: wrapping the input in a `<label>` doubles the hit area for free.
Roles and state: A native `<input type="checkbox">` needs no ARIA. The third state is `indeterminate`, set through the DOM property — there is no HTML attribute for it.
A group of related checkboxes belongs in a `<fieldset>` with a `<legend>`, so the group question is announced before the options.
Never rely on a tick's colour alone to signal an error state; pair it with text.
Focus: Focus stays put when ticked. A select-all that steals focus after toggling twenty rows is disorienting.

In the wild

Gmail — The select-all in the toolbar goes indeterminate when only some messages on the page are ticked.
GOV.UK — Checkbox groups always sit in a fieldset with the question as the legend.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.