Skip to content
Components

Selection controls

Checkbox for independent facts, radio for mutually exclusive answers, switch only for something that takes effect immediately. Every control has a clickable label.

Which control

Checkbox

Independent facts. Several can be true at once, and the change usually waits for a Save.

Radio

Mutually exclusive answers, two to about five. Past that it is a select.

Switch

Takes effect immediately — a map layer. If the change needs a Save button, it is a checkbox.

Checkbox

The real input is present and merely visually hidden, never replaced by a role="checkbox" div. A div gets you no Space key, no form submission, and no :indeterminate.

Radio

Radios in one group share a `name`. Without it they are independent checkboxes that happen to look round — and the arrow-key navigation that makes a group work silently does not exist.

Selected is drawn as a thick ring rather than an inner dot: one property changes, so there is nothing to mis-centre at fractional pixel sizes.

Switch

It is a real <button role="switch"> with aria-checked, not a styled checkbox — switch is the role that makes a screen reader say "on" and "off" rather than "checked" and "not checked", and the difference matters when the thing is a live map layer.

Navigate

Esc