Input

Combobox

A text field with a list of suggestions; the user can pick one or type their own value.

Fruit

Also known as

Looks like a text field, sometimes with a downward arrow on the right. Typing or pressing the arrow shows a list of suggestions below it.

Typing shows suggestions that start with the typed text.
Choosing a suggestion puts it into the field; the user can also keep a value that is not in the list.
Keyboard focus stays in the text field while the arrow keys highlight suggestions.
HTML can also make a simple combobox with <input list> and <datalist>, but how the list looks and works differs by browser.

Key	Action
`↓`	Opens the suggestions, or highlights the next one.
`↑`	Opens the suggestions, or highlights the previous one.
`Alt + ↓`	Opens the suggestions without highlighting one.
`Enter`	Puts the highlighted suggestion into the field and closes the list.
`Esc`	Closes the list. If it is already closed, clears the field.

Use it when there are many options. For a short list, a select is enough.
There are two kinds: one that only filters a fixed list, and one that also accepts free text.

Text field: A combobox adds a list of suggestions to a text field.
Select: A combobox lets the user type and accept a value outside the list; a select only allows options from the list.
Search field: A combobox suggests values to pick from while typing; a search field sends the typed words as they are.

WAI-ARIA APG: Combobox Pattern (Last checked: 2026-10-20)
WAI-ARIA APG: Editable Combobox With List Autocomplete Example (Last checked: 2026-10-20)
Open UI: Combobox (Explainer) (Last checked: 2026-10-20)
MUI: Autocomplete (Last checked: 2026-10-20)
デジタル庁デザインシステムウェブサイト「コンボボックス」をもとに作成 (Last checked: 2026-10-20)