Combobox

Component preview

An editable field linked to a popup list that filters or suggests options while the user types.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: autocomplete, typeahead, searchable select

type a city and choose from suggestions
a searchable list inside a form field
show matching options as I type
an input with autocomplete results below
filter a long list before selecting
let me type or pick a suggested value

Try it

Choose from a list

Compare all three behaviors

Shared comparison scenario: A form asks the user to choose one value from a known option set before continuing.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Combobox

Combobox accepts an editable query and coordinates it with options; Select is closed and fixed, while Listbox is an always-visible option collection.

Your task

Type Porto, move through suggestions with arrows, commit the correct city, then clear and recover from no results.

Edge case to verify

A query with no match keeps the typed value, announces that no options exist, and offers a clear recovery path.

Mission

Combobox

Type Porto, move through suggestions with arrows, commit the correct city, then clear and recover from no results.

Primary state: Matching city options appear as the query changes and one active option is visually and programmatically identified.

Departure city

Typing narrows the available options.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Label

The persistent text that names a control or field.

Use it when

Selecting from a long list that benefits from filtering
Suggesting known values while preserving fast text entry

Avoid it when

A short native Select is simpler
The popup contains commands rather than selectable values

Compare similar concepts

Select offers a closed fixed list without text filtering; Combobox includes an editable query, while Listbox keeps options visibly available.

Select

Listbox keeps options visible as one composite control; Select hides them in a picker, and Combobox adds an editable query.

Listbox

Technical details

Behaviors

Filter options
Typing narrows the available options while keeping the input and active option coordinated.
Navigate options
Arrow keys move the active option, and selection is announced independently from focus.
Select one value
Choosing an option replaces the previous value and exposes the selected state.
Dismiss with Escape
Escape closes the temporary surface and returns focus to a sensible control.

States

Combobox idle
Combobox idle
Suggestions open
Suggestions open
City committed
City committed

State transitions

Combobox idle → Suggestions open
Typing a supported query filters the city options and opens the suggestion list.
Suggestions open → City committed
Enter, pointer, or touch commits the highlighted supported city.
Suggestions open → Combobox idle
Escape dismisses uncommitted suggestions and preserves the prior value.
City committed → Combobox idle
The clear control removes the committed city and returns focus to an empty input.

Test scenarios

Context: A travel form lets the user search supported departure cities from a long international list.
Mission: Type Porto, move through suggestions with arrows, commit the correct city, then clear and recover from no results.
Primary state: Matching city options appear as the query changes and one active option is visually and programmatically identified.
Edge case: A query with no match keeps the typed value, announces that no options exist, and offers a clear recovery path.

Accessibility

Role: combobox controlling a listbox
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: DOM focus remains in the input while the active option relationship communicates list navigation.
Dismissal: Escape closes the popup without destroying the query; selection or a safe outside press also closes it.
Scroll: A long option collection scrolls without moving the page behind it, and the active or selected option stays visible.
Announcement: Expanded state, result count, active option, selected value, loading state, and no-result state are announced without excessive chatter.
Keyboard: Typing edits the query
Arrow Down and Up move the active option
Enter commits the active option
Escape closes suggestions without clearing text

Bindings

Combobox
implementationKind
shadcn-base
nativeElement
input
ariaPattern
combobox with listbox popup
radixPrimitive
Not applicable
shadcnRecipe
Combobox (Base UI backend)
runtimeDependency
@base-ui/react@1.6.0
packageName
@base-ui/react
exportName
Combobox
exactVersion
1.6.0
status
exception
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Base UI coordinates editable input, popup, active option, and selection; Dropdown Menu or an untested Popover composition is not equivalent.
Verify binding source

Sources

WAI-ARIA APG: Combobox Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Combobox: combobox, popup, active option, selection, and keyboard interaction guidance.
Base UI: Combobox
Base UI · documentation · 2026-07-16
Claim covered: Combobox: documented Base UI Combobox input, popup, option, value, and keyboard APIs.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.