Combobox

Also called autocomplete, typeahead, searchable select, filterable dropdown

An input paired with a list of options that narrows as the user types, used to pick one or more values.

Example

Thirteen options here, hundreds in a real timezone list. Type a few letters — focus stays in the input while the arrow keys move through the results.

Timezone

Selected: Europe/London

There are more options than a plain select can present comfortably — roughly a dozen and up.
The user usually knows what they are looking for, so typing three letters beats scrolling.
The list is long but finite and known: countries, currencies, repositories, teammates.
You need to pick several values and want them shown as removable chips.

There are two to five options. Radios or a plain select show everything at once and need no typing.
Any text is valid. That is a plain input; forcing a match on free text only frustrates people.
The user does not know the vocabulary. If they cannot guess a word to type, filtering helps nobody — show a browsable list instead.
The choice triggers an action rather than setting a value. That is a command palette or a menu.

Turns an unusable list into a two-keystroke choice.
Keeps the answer constrained to real options, unlike a free-text field.
Handles multi-select gracefully with chips, where a multi-select dropdown becomes unreadable.

Hides its options until typing starts, so it is poor for browsing or discovery.
On mobile the on-screen keyboard covers much of the list it is filtering.
The accessibility contract is genuinely intricate — this is one to take from a primitive rather than build by hand.

What this pattern needs in order to work for everyone.

Keyboard: Arrow keys move through options while focus stays in the input; Enter selects the highlighted one.
Escape closes the list, and a second Escape may clear the input — pick one behaviour and keep it consistent.
Backspace on an empty multi-select input should remove the last chip; people expect it and it is quick to add.
Roles and state: The input takes `role="combobox"` with `aria-expanded` and `aria-controls`; the list is a `listbox` of `option`s.
Use `aria-activedescendant` to point at the highlighted option instead of moving focus into the list.
Announce how many results remain after filtering, and say plainly when there are none.
Focus: Focus never leaves the input. Options are highlighted through `aria-activedescendant`, which is what lets someone keep typing while moving through results — and is the single detail that separates a real combobox from a styled dropdown.

GitHub — The repository switcher filters as you type across hundreds of repositories.
Stripe Dashboard — Currency and country fields use comboboxes because both lists are long and users know the value.

Side-by-side breakdowns of patterns that solve a similar problem.