Skip to content

Checkbox

A control for independent on/off choices — any number of which can be selected at once, including none.

UI Components

A checkbox is a control for independent on/off choices. Any number can be selected, including none, and that independence is the entire basis for choosing it over a radio button.

The test is two questions. Could somebody reasonably want more than one of these? Could they reasonably want none? A yes to either makes it a checkbox.

Checkbox against radio

CheckboxRadio
ChoicesAny number, including noneExactly one
Options must beIndependentMutually exclusive and exhaustive
Can be clearedYesNo, once set
Single instanceA binary opt-inNever — a lone radio cannot be unset

The last row is the one products get wrong. A single radio button is a trap: once chosen it cannot be unchosen, which leaves somebody stuck with an answer they cannot retract.

The indeterminate state

The third state, usually a dash, means "some of the things below this are selected". It belongs on select-all controls and on parent nodes in a tree.

Two rules keep it sane. It is a display state only — a user clicking an indeterminate checkbox must land on checked or unchecked, never back into the dash. And the parent must reflect its children honestly: if six of forty rows are selected, the header checkbox shows indeterminate, not unchecked.

This matters in B2B specifically, because the select-all checkbox on a paginated table has to answer a question the design usually ducks: does "all" mean this page or the whole set? Say which, and offer both.

Writing the label

State what checking it does, positively. "Send me product updates" is checkable. "Do not send me product updates" makes an unchecked box mean consent, which is a double negative and, in consent flows, a dark pattern.

Make the whole label a target. A four-millimetre box is a small target; the label doubles or triples it for free, and it is the default behaviour of a properly associated label.

One idea per box. A label joining two things with "and" cannot be answered honestly by somebody who wants one of them.

Defaults carry more weight than anything else

A checked box is accepted far more often than an unchecked one is checked. That makes the default a decision about the outcome, not a convenience.

Where the default is genuinely helpful, set it. Where it produces consent, a purchase, or data sharing, leaving it unchecked is the honest choice, and in several jurisdictions the legal one. A pre-ticked box for anything a person would decline if asked directly is the clearest single marker of a design optimising against its users.

In practice

A settings page has a notifications section with a single checkbox: "Email notifications". It is checked by default, and the support queue carries a steady trickle of people asking why they get so much email.

Watching it explains the problem. The one box controls seven different kinds of message, from a weekly digest to a security alert. People who want one and not the others have two options: everything or nothing, and most choose nothing, which means the security alert stops too.

Replacing it with seven checkboxes and a select-all that shows indeterminate when some are on ends that category of ticket. The security alert also moves out of the group entirely, because it is not something to be opted out of casually.

Where teams get it wrong

  • A checkbox where the options are exclusive. Two answers that cannot both be true.
  • A single radio button. Choosable once and never retractable.
  • Negative labels. Unchecked meaning yes.
  • Pre-ticked consent. Legal exposure and a plain signal of intent.
  • One box for several things. Unanswerable honestly.
  • A styled div. No keyboard, no announcement, no label association.

Frequently Asked Questions