Checkbox, radio and switch
Choices for yes or no, one of several, or several of several. The whole row is the label, at least 44px tall, so it’s easy to hit.
- CSS
css/components/choice.css
01 — Variants
Checkboxes
Any number of options, each on or off.
Radio buttons
One option from a few. .field__options--inline lays them out in a row.
Switch
A checkbox with role="switch", for a setting that takes effect straight away.
02 — Usage
Use it for
- Checkboxes for independent options, and for agreeing to something.
- Radios for two to five options where people should see them all.
- Switches for settings that apply at once, without a Save button.
Avoid
- A switch inside a form that only applies on submit. Use a checkbox.
- Radios for long lists. Use a select.
03 — Accessibility
Notes
- Native inputs inside their label: the whole row is clickable and announced correctly.
- Group related choices with
role="group"orrole="radiogroup"and a label, or a<fieldset>and<legend>.