Selection components
Which component to use when someone needs to pick something. The diagram maps the decision to the right component based on what the selection does.
Decision guide
Component reference
Component
When to use
Switch
Single on/off choice that takes effect the moment the user flips it. No confirmation step. Selection and execution happen at the same time.
Checkbox
Single choice where the user confirms separately before anything changes, typically by submitting a form. Common for opt-ins and terms.
Radio button
2 to 5 mutually exclusive options shown in a list. Use when labels vary in length or need explanation. Each option occupies its own row.
Segmented control
2 to 5 short, consistent, mutually exclusive options laid out horizontally. Good for view modes, time ranges, or pricing tiers where labels are uniform.
Dropdown
More than 5 single-select options. Collapses the list until opened, keeping the layout compact. Avoid when fewer options could fit inline.
Tabs
The selection changes what is shown on the page rather than setting a value. Use when switching between sections of content, not when picking from a list.
Checkbox (in list)
Multi-select where options have varied or longer labels. Each item in the list gets its own checkbox. Good for filtering, tagging, or selecting multiple rows.
Toggle button (in list)
Multi-select where all options are short (1–2 words) and visually consistent. Displayed as a row of compact buttons rather than checkboxes.