Select
Also called dropdown, picker, listbox, select menu
A form control that shows the current choice and reveals a list of options to change it.
Example
Four options, all known by name. No ARIA attributes here at all — adding any would make it worse. On a phone this opens the platform picker.
The same job with three options. Every choice is visible, the prices can be compared without opening anything, and selecting costs one click instead of two.
Selected: GBP · standard
When to use it
- There are roughly 3 to 15 options and the user knows them by sight — country, currency, status.
- The list is fixed. Nothing the user types could add to it.
- The field is one value in a form and the form owns the result.
When not to
- The list is long. Scrolling 200 countries to find Portugal is worse than typing three letters — that is a combobox.
- There are two or three options and they all fit on screen. Radio buttons show every choice at once and cost one click instead of two.
- The user might need something not in the list. A select cannot express “other”, and bolting a text field onto it is a combobox wearing a disguise.
Trade-offs
- On mobile the native element opens the platform picker — a wheel on iOS, a dialog on Android — which no custom listbox matches for one-handed use.
- Keyboard behaviour, typeahead and screen reader support come for free and are already familiar.
- Impossible to get into an invalid state: the value is always one of the options.
- The native one is barely styleable, which is why teams rebuild it and then have to re-earn all the behaviour above.
- The current value is the only thing visible, so comparing options means opening it.
- Long lists become a scroll hunt with no way to narrow them.
Accessibility
What this pattern needs in order to work for everyone.
- Keyboard
- Native gives you all of it: arrows move, typing jumps to the matching option, Home and End reach the ends, Escape cancels.
- A custom select must rebuild every one of those, including typeahead — the part most rebuilds forget.
- The closed control is one tab stop, not one per option.
- Roles and state
- Native `<select>` needs no ARIA at all. Adding `role="listbox"` to it makes things worse, not better.
- A custom one is a `combobox` trigger plus a `listbox` of `option`s, with `aria-expanded` and `aria-activedescendant` maintained by hand.
- Always label it. A select whose only label is the placeholder loses its name the moment a value is chosen.
- Focus
- Focus stays on the trigger while the list is open; the highlighted option is tracked with `aria-activedescendant` rather than by moving focus into the list.
In the wild
- GOV.UK — Uses the native select deliberately, and their guidance says to avoid selects entirely where radios fit.
- Stripe Checkout — Native on mobile, custom on desktop — the platform picker is worth more than visual consistency.
Compared with
Side-by-side breakdowns of patterns that solve a similar problem.