Skip to content
UX Atlas
Plate CMP·004 · ComponentGrid E1 · Rev. 2026-08-14

Select

Choosing one option from a known set, which is the wrong control below about five options.

ComponentCraft conventionFoundational

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.

On this plate
  1. 1Definition
  2. 2Choosing the right control
  3. 3Requirements
  4. 4Native or custom
  5. 5In practice
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Continue from here

Reach for this when

  • Selecting one option from six or more.
  • Space is constrained.

Common mistakes

  • Selects used for two or three options.
  • Options in arbitrary order.
  • Custom implementations with incomplete keyboard support.

Choosing the right control

Option countControl
2Radio buttons, or a toggle if the choice is binary and reversible.
3 to 5Radio buttons. All options visible costs one interaction less.
6 to 15Select.
Over 15Combobox with search and filtering.
Over 100Search-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.

Native or custom

Do

  • Use the native element when the options are plain values and you can live with the platform styling.
  • Rebuild only when options need two lines, grouping or icons that the native control cannot render.
  • Implement the full keyboard contract if you rebuild: arrows, Home, End, typeahead, Escape and the active descendant.
  • Keep the current value visible on the trigger, and announce it.

Do not

  • Replace the native control for visual consistency alone, then ship half the behaviour.
  • Open a custom list that covers the trigger on a small screen.
  • Use a select where the reader can choose several values. That is checkboxes or a multi-select with visible chips.
  • Leave the mobile experience worse than the platform picker you replaced.

In practice

  1. i.

    The country list

    Long known sets

    Two hundred and fifty options in a plain select is a scroll exercise. With typeahead, the same list resolves in three keystrokes, which is why country selection is the canonical combobox case.

  2. ii.

    Custom select, native behaviour

    What replacing it costs

    The native control gives keyboard support, typeahead, mobile pickers and screen reader behaviour for nothing. Replacing it is justified when options need two lines or the styling is a hard requirement, and it is a substantial component either way.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Autocomplete and Typeahead

Pattern

A text input that suggests matches from a large set as the reader types.

Key difference

A select offers a closed list the reader picks from. Autocomplete accepts typing and narrows as it goes. The list length decides: a select stops working once scanning it costs more than typing.

Use Select when

  • The whole set is short enough to scan, roughly under twenty.
  • The reader may not know the options by name.
  • Every valid answer is in the list.

Use Autocomplete and Typeahead when

  • The set is long: cities, products, users, tags.
  • The reader usually knows roughly what they want to type.
  • Free text, or a new value, may be a legitimate answer.

Learn about Autocomplete and Typeahead

vs.

Radio Group

Component

A group of mutually exclusive options, all visible and comparable at a glance.

Key difference

Radios show every option at once and cost one interaction. A select hides them behind a second interaction and buys back vertical space, which only pays once the list is long.

Use Select when

  • The list is long or familiar, such as countries or dates.
  • The choice is routine and needs no comparison.
  • Space is genuinely constrained, not merely tidy.

Use Radio Group when

  • There are roughly seven options or fewer.
  • The options need comparing before one is chosen.
  • One option should be recommended or preselected visibly.

Learn about Radio Group

Local chart

CMP·004 · Region III · Grid E1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Default EffectBIAS·004 · PRINCIPLES BEHIND THISHick's LawLAW·001 · PRINCIPLES BEHIND THISConstraintsPRIN·009 · PRINCIPLES BEHIND THISDropdownCMP·019 · OFTEN USED WITHText InputCMP·003 · OFTEN USED WITHRadio GroupCMP·006 · ALTERNATIVE APPROACHAutocomplete and TypeaheadPAT·003 · COMMONLY CONFUSED WITHForm UX ChecklistCHK·001 · CHECK YOUR WORK

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

A CheckoutA FormAn Ecommerce ExperienceSettings

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.