Select, radio buttons or something else
Applies to All viewports
A select hides its options. That is a cost, and worth paying only when there are too many options to show.
- 2–5
- Radio buttons, or a segmented control. Every option visible. One tap to choose.
- 6–15
- A select. A familiar list that fits on screen without searching.
- 15+
- A searchable list. Countries, people, products. Let people type to narrow it.
- Actions
- A menu, not a select. A list of things to do is not a form value. It needs a menu button.
Why?
People choose faster and with fewer mistakes when they can see every option. A closed select shows none.
Common mistakes (4)
- A select for two options.
- A select used to navigate, so choosing an option leaves the page.
- A long list with no search and no sensible order.
- Placeholder text used as the label.
Senior designer note“Before reaching for a select, ask whether the options would fit on the screen if you just showed them.”
Official guidanceSGDSMaterialAppleGOV.UKAtlassianCarbonUSWDSPrimer
- SGDS
With only two or three options, use radio buttons.
SGDS, Select(opens in a new tab)Design-system convention
- Material
Users click an icon, text field or other component, then select from a list of options.
Android Developers, Menus(opens in a new tab)Design-system convention
- Apple
Use a pop-up button for a flat list of mutually exclusive options or states.
Apple HIG, Pop-up buttons(opens in a new tab)Design-system convention
- GOV.UK
The select should only be used as a last resort in public-facing services.
GOV.UK Design System, Select(opens in a new tab)Design-system convention
- Atlassian
Use select to let people choose one or more items from a list of menu items.
Atlassian Design System, Select usage(opens in a new tab)Design-system convention
- Carbon
Do not use a dropdown when there are two options. Use a radio button group.
Carbon, Dropdown(opens in a new tab)Design-system convention
- USWDS
Use the select only for about seven to 15 options, when space is limited.
USWDS, Select(opens in a new tab)Design-system convention
- Primer
Use a Select for longer lists. With six or fewer options and no need to save vertical space, consider a RadioGroup.
Primer, Select guidelines(opens in a new tab)Design-system convention