Selection controls
Choosing between a checkbox, a radio and a switch: how many may be chosen, and when the choice takes effect.
Overview
The three are documented separately — Checkbox, Radio and Switch — and ship as three items over one shared base file. What is left here is the question that comes before all of them, and the rules that apply to whichever one you land on. This page ships no component of its own.
The three are distinguished by two questions: how many may be chosen, and when the choice takes effect. Answering those consistently is most of what this page is for.
| Control | Choose | Takes effect | Use for |
|---|---|---|---|
| Checkbox | Zero or more, independently | On submit | Filters, opt-ins, multi-select in a form |
| Radio | Exactly one, from a visible set | On submit | Mutually exclusive options where seeing them all matters |
| Switch | On or off | Immediately | A setting that applies the moment it is flipped |
The distinction is not cosmetic. A switch changes system behaviour the instant it moves, with no confirmation step — which makes it right for "show model annotation" and wrong for anything that belongs in a submitted record. If the change should be reviewable before it counts, it is a checkbox in a form, not a switch. Using a switch for a recorded clinical value removes the moment at which a clinician would notice a mistake.
Honest about timing
The control's shape tells the clinician whether the change has already happened. That promise is never broken for layout convenience.
Never pre-decided
No clinical option is selected on the clinician's behalf — the same rule as Select.
Labelled by meaning
The label states what selecting does, not what the field is called internally. The whole label is the target.
Anatomy
Rules
- The whole label is the target, not just the box. On touch that is the difference between a 20 px target and a compliant one — see Scaling.
- Radio groups are a real
fieldsetwith alegend, and are never pre-selected where the choice is clinical. - A radio group with two options is still a radio group if both need to be visible. Collapsing it to a switch hides one of the choices.
- Indeterminate is a real checkbox state, for a parent whose children are partly selected. It always states the count.
- Never nest a switch inside a form that submits. Mixing immediate and deferred effects in one panel makes neither predictable.
- Disabled options explain themselves — see Interaction states.
- Never use a switch for a destructive or irreversible setting. Those need the confirmation step a switch removes.
Do's and don'ts
The pairs moved to the control they are about: Checkbox, Radio and Switch.
Accessibility
- Every one of them is a real input with a bound label. A styled div loses the state, the role, and the keyboard behaviour the platform gives for free.
- The whole label row is the target, on all three — the shared base file exists so that rule cannot drift between them.
- Hints are referenced, not merely rendered. A hint beside a control that nothing points at is a hint for people who can see it and for nobody else.
- State never rests on colour alone — a tick, a dot and a knob position, each with a label that reads correctly without it.
Outcomes of use
- Effectiveness — the reader can tell what will happen when they touch the control, before they touch it.
- Efficiency — the right control for the question means no submit step where none is needed, and one where it is.
- Satisfaction — consistency: the same shape always means the same thing. Attributes believed to contribute to an outcome; the outcome is settled by observing real use, not by this page — see Usability & context of use.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1). Each control's own page carries the controls specific to it.
- Staging and applying are carried by different controls. (you; the switch is the only one that may apply) Mitigates: a setting changed by somebody who thought they were preparing a change.
- The whole label row is the target on all three. (the component, on all three) Mitigates: a mis-tap onto an adjacent option in gloves.
- No clinical choice is pre-made. (you) Mitigates: an unasked question arriving in the record as answered.
Related
- Checkbox — zero or more, staged.
- Radio — exactly one, nothing pre-selected.
- Switch — applied on contact.
- Select — when the set is too long to show in full.
- Density & scaling — where the 44 px floor comes from.