NameThatUIPattern diagnostic

semantic pattern · Selection and suggestions

Select

A control for choosing one or more values from a predefined set without accepting arbitrary text input.

Select behavior diagram
reviewpublishedV1 field note

Decisive boundary

If users need to type or filter a long list, use an editable Combobox.

Definition and intent

What is a Select UI pattern?

Use the behavior, not the silhouette

A control for choosing one or more values from a predefined set without accepting arbitrary text input. The term is used here as a semantic pattern whose role and interaction contract carry more meaning than its appearance. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.

Collect a value from a manageable, predefined set. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.

Know when the label is wrong

The fastest way to identify a pattern is often to reject the nearest alternative. For Select, the boundary is: If users need to type or filter a long list, use an editable Combobox.

Do not implement it as Combobox or Autocomplete when typing is not required. If those requirements describe the real task better, use the related pattern page or the full Selection and suggestions comparison before writing code.

Decision process

Decide before choosing a component

Record these requirements in plain language. A library component name is not a substitute for the contract.

01

Confirm the user job

Collect a value from a manageable, predefined set.

02

Define opening and closing

Focus and platform-specific open interaction. Selection, Escape, or platform dismissal.

03

Specify access behavior

Focus remains associated with the control. Uses native or equivalent option navigation and selection behavior.

04

Reject the near miss

Combobox or Autocomplete when typing is not required.

Behavior contract

What must survive the build

trigger
Focus and platform-specific open interaction.
dismissal
Selection, Escape, or platform dismissal.
modality
Non-modal control, though mobile platforms may present a picker surface.
focus
Focus remains associated with the control.
keyboard
Uses native or equivalent option navigation and selection behavior.
interactive
Users choose from provided options; arbitrary values are not accepted.
persistence
The selected value remains visible.
placement
Inline form control with a platform-dependent popup.
mobile
Prefer native behavior when it provides a better platform picker.

Failure modes

Common wrong builds

  • Using a custom menu without form semantics.
  • Using Select for hundreds of options.
  • Allowing a value outside the option set.

Observable checks

Verify the result

  • Every option has a clear label.
  • The selected value is exposed to forms.
  • Keyboard selection works.
  • The control has an accessible label.
  • Typing is not required by the task.

Coding-agent handoff

Implementation brief template

Pattern: Select
Purpose: Collect a value from a manageable, predefined set.
Trigger: Focus and platform-specific open interaction.
Dismissal behavior: Selection, Escape, or platform dismissal.
Modality: Non-modal control, though mobile platforms may present a picker surface.
Focus behavior: Focus remains associated with the control.
Keyboard behavior: Uses native or equivalent option navigation and selection behavior.
Interactive content: Users choose from provided options; arbitrary values are not accepted.
Placement: Inline form control with a platform-dependent popup.
Mobile behavior: Prefer native behavior when it provides a better platform picker.
Do not implement as: Combobox or Autocomplete when typing is not required.
Acceptance checks:
- Every option has a clear label.
- The selected value is exposed to forms.
- Keyboard selection works.
- The control has an accessible label.
- Typing is not required by the task.

Claim-level references

Sources, not a confidence score

01The select elementMDN Web Docs · Platform documentation

Selection from a predefined option list

Do not stop at the label

Combobox or Autocomplete when typing is not required.

Diagnose this decision
Full clusterSelection and suggestions Common alternativeComboboxCommon alternativeAutocompleteCommon alternativeDropdown Menu

Related UI patterns

How Select differs from nearby options

Follow the behavior boundary, not a shared visual treatment.

semantic pattern

Select vs Combobox

An input or selection control with an associated popup that presents allowed or suggested values. The key question for Combobox is: Autocomplete describes how suggestions respond to input; Combobox is the broader widget pattern.

behavior variant

Select vs Autocomplete

A suggestion behavior that filters or completes values as a user types, commonly implemented as an editable combobox. The key question for Autocomplete is: Specify whether suggestions are advisory or whether the final value must come from the list.

composite pattern

Select vs Dropdown Menu

A button-triggered menu of commands or choices with managed keyboard navigation. The key question for Dropdown Menu is: Do not use a menu to collect a form value when Select or Combobox semantics are expected.

Frequently asked questions

Select UI pattern questions

Direct answers based on the reviewed behavior contract above.

What is a Select in web UI?

A control for choosing one or more values from a predefined set without accepting arbitrary text input. In this reference set it is a semantic pattern whose role and interaction contract carry more meaning than its appearance.

When should I use a Select?

Collect a value from a manageable, predefined set. The decisive boundary to confirm is this: If users need to type or filter a long list, use an editable Combobox.

What keyboard and focus behavior does a Select need?

Uses native or equivalent option navigation and selection behavior. Focus remains associated with the control. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.

How should a Select behave on mobile?

Prefer native behavior when it provides a better platform picker. Its modality is a separate requirement: Non-modal control, though mobile platforms may present a picker surface.

How do I verify a Select implementation?

Start with observable checks: Every option has a clear label. The selected value is exposed to forms. Keyboard selection works. Then verify the remaining checks and compare the result with the linked source guidance.