Design Pattern

Combobox

A combobox is a selection UI that combines an input field with a list of suggestions. It's useful when there are many options and a plain list would be hard to scan, but it is harder to implement than a select element and should be used only when truly needed.

Difficulty: Advanced Category: Forms

When to use / not use

Use it when

  • When there are many options and search or filtering is needed
  • When users should be able to pick an option even if they only remember part of its text
  • When you can clearly define the boundary between suggestion selection and free-form input

Don't use it when

  • When options are few and static → a select element is enough
  • When you don't want free-form input yet still end up accepting ambiguous text
  • When you can't properly support keyboard operation and assistive technology

Anatomy

1 Label
2 Input field (role="combobox")
3 Suggestion list (listbox)
4 ARIA attributes for selection / expanded state
  1. Input field — The center of input and suggestion. Manages aria-expanded and aria-controls
  2. Suggestion list — Use role=listbox and role=option to convey meaning
  3. State management — Define how highlighted items, selected values, and no-match cases are handled

HTML / ARIA Structure

Key points

  • It must behave like a widget for choosing from suggestions, not just a search box
  • Correctly update role=combobox, aria-expanded, and aria-controls
  • Keep the rules for suggestion focus movement and selection confirmation consistent
  • Decide up front whether to allow free-form input or to restrict to suggestion-only selection

CSS Implementation

Points the visuals should reinforce

  • Input field — Should look and feel like an ordinary text field
  • Suggestion popup — Make the list's boundaries, stacking order, and scrolling clear
  • Active suggestion — Needs a highlight that works for keyboard navigation, not just hover
  • No match — Communicate the empty state both visually and in text

Accessibility

WCAG 4.1.2 Name, Role, Value

The roles, expanded state, and selection state of the input and the suggestion list must be conveyed to assistive technology.

WCAG 2.1.1 Keyboard

Moving, selecting, and closing suggestions must all work without a mouse.

WCAG 3.3.2 Labels or Instructions

Make it clear in the label or description whether this is a search or a selection from suggestions.

Keyboard operation

  • Use Tab to move to the input
  • Use ↓ to move to suggestions and Enter to select
  • Press Escape to close the suggestion list

Live Demo

Searchable combobox

A basic search-style pattern that filters suggestions as the user types.

PreviewFullscreen

With recent suggestions

A pattern that puts frequent suggestions at the top to speed up repeated entry in operational screens.

PreviewFullscreen

Custom styling

A variation where the input and suggestion list share a consistent look for internal-tool aesthetics.

PreviewFullscreen

Common mistakes

Custom-building it when a select would do

You only add complexity and weaken assistive-technology support.

The suggestion list isn't keyboard-operable

A popup that is only visual doesn't function as a combobox.

Ambiguous rules for free-form input vs. selection

Data quality on submit degrades, and users can't tell whether their input was accepted.