Select
Choosing one option from a known set, which is the wrong control below about five options.
Definition
A select presents a list of mutually exclusive options. It hides the options behind an interaction, which makes it efficient for long lists and unnecessarily slow for short ones.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
Choosing the right control
| Option count | Control |
|---|---|
| 2 | Radio buttons, or a toggle if the choice is binary and reversible. |
| 3 to 5 | Radio buttons. All options visible costs one interaction less. |
| 6 to 15 | Select. |
| Over 15 | Combobox with search and filtering. |
| Over 100 | Search-first, with results rather than a list. |
Requirements
- Native select elements are keyboard accessible, work with assistive technology and render correctly on mobile. Custom ones must reimplement all of that.
- Order options meaningfully: by frequency, alphabetically, or by a natural sequence. Never by database order.
- Make the default explicit. If there is no sensible default, use an unselected state with a clear label rather than defaulting to the first option.
- Group long lists with optgroup.
- Never use a select for two options where a radio pair would show both.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Default EffectCognitive bias
- Hick's LawLaw
- ConstraintsPrinciple
Often used with
These usually appear in the same screen or the same decision.
- DropdownComponent
- Text InputComponent
- Autocomplete and TypeaheadPattern
Alternative approach
A different answer to the same problem, with a different cost.
- Radio GroupComponent
Under about five options, radios show everything without a second interaction.