Combobox vs Autocomplete vs Select vs Text input

Prefer a combobox when users type or open a popup from a single field and must be able to move an active option, accept it, cancel without committing, and keep the submitted value synchronized with the visible label.

Combobox live example Autocomplete live example Select live example Text input live example

Decision dimensions

Dimension	Combobox	Autocomplete	Select	Text input
UI or UX	UI + UX - Single-value input widget with owned popup	UI + UX - Input widget with suggestion behavior	UI + UX - Single-choice dropdown control	UI + UX - Single-line freeform data-entry control
UI guidance	Render a persistent label, editable or select-only value surface, popup indicator, collapsed and expanded states, option popup, active option, committed selection, clear action when supported, help text, and error text.	Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.	Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.	Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field.
UX guidance	Use a combobox when users need one value from a large or dynamic option set and benefit from opening a popup, typing to narrow it, or copying/editing the displayed value.	Help users complete a known value faster without forcing an incorrect suggestion.	Help users choose one value from a moderate known list without showing every option permanently.	Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.
Good UI	An Assignee combobox shows a label, typed text, disclosure button, active option in a listbox, selected-value status, and an error when typed text has no accepted option.	Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.	Persistent label, hint text, visible selected value, readable options, and clear required validation state.	A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.
Bad UI	A custom dropdown displays matching labels but never exposes expanded state, active option, or the controlled popup.	Placeholder-only label that disappears after typing.	Placeholder as the only label.	The only instruction is placeholder text that disappears when the user starts typing.
Good UX	A user types Ada, moves the active option with Arrow Down, presses Enter to accept Ada Lovelace, then edits the label and sees the selected ID clear until a new option is accepted.	Typing filters suggestions while preserving the exact typed value.	Users can open, scan, choose one value, and review the selected value after close.	A user types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.
Bad UX	The component automatically commits the first match as soon as a user types one character.	Automatically forcing the first suggestion into the field.	Hiding two obvious critical choices in a dropdown.	Validation fires on the first focus event and blocks typing before the user has had a chance to answer.
Best fit	Users choose one value from a large, dynamic, or filterable option set.	The list is long but values are known.	The user chooses one option from a moderate known list.	The answer is short and user-authored.
Avoid when	The list is short enough for native select, radio buttons, or segmented controls.	The task is open-ended query exploration.	The option set is short and comparison matters.	The answer is a paragraph, comment, address block, or explanation requiring multiple lines.
Required state	Collapsed empty state with label, help text, and popup affordance.	Empty input state.	Closed state with empty option or current selected value.	Empty untouched state with persistent label and optional hint.
Accessibility burden	Expose the value surface with role combobox or a native control that maps correctly to combobox semantics.	Expose combobox expanded state, active descendant, and option labels.	Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.	Associate every text input with a visible label or equivalent accessible name that matches the visible question.
Common misuse	Using a custom combobox for a short list where native select, radio buttons, or segmented controls would be simpler.	Forcing the first suggestion when the user did not choose it.	Custom select with no keyboard support or hidden selected state.	Using placeholder text as the only label or instruction.

Combobox

UI or UX: UI + UX - Single-value input widget with owned popup
UI guidance: Render a persistent label, editable or select-only value surface, popup indicator, collapsed and expanded states, option popup, active option, committed selection, clear action when supported, help text, and error text.
UX guidance: Use a combobox when users need one value from a large or dynamic option set and benefit from opening a popup, typing to narrow it, or copying/editing the displayed value.
Good UI: An Assignee combobox shows a label, typed text, disclosure button, active option in a listbox, selected-value status, and an error when typed text has no accepted option.
Bad UI: A custom dropdown displays matching labels but never exposes expanded state, active option, or the controlled popup.
Good UX: A user types Ada, moves the active option with Arrow Down, presses Enter to accept Ada Lovelace, then edits the label and sees the selected ID clear until a new option is accepted.
Bad UX: The component automatically commits the first match as soon as a user types one character.
Best fit: Users choose one value from a large, dynamic, or filterable option set.
Avoid when: The list is short enough for native select, radio buttons, or segmented controls.
Required state: Collapsed empty state with label, help text, and popup affordance.
Accessibility burden: Expose the value surface with role combobox or a native control that maps correctly to combobox semantics.
Common misuse: Using a custom combobox for a short list where native select, radio buttons, or segmented controls would be simpler.

Autocomplete

UI or UX: UI + UX - Input widget with suggestion behavior
UI guidance: Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.
UX guidance: Help users complete a known value faster without forcing an incorrect suggestion.
Good UI: Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.
Bad UI: Placeholder-only label that disappears after typing.
Good UX: Typing filters suggestions while preserving the exact typed value.
Bad UX: Automatically forcing the first suggestion into the field.
Best fit: The list is long but values are known.
Avoid when: The task is open-ended query exploration.
Required state: Empty input state.
Accessibility burden: Expose combobox expanded state, active descendant, and option labels.
Common misuse: Forcing the first suggestion when the user did not choose it.

Select

UI or UX: UI + UX - Single-choice dropdown control
UI guidance: Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.
UX guidance: Help users choose one value from a moderate known list without showing every option permanently.
Good UI: Persistent label, hint text, visible selected value, readable options, and clear required validation state.
Bad UI: Placeholder as the only label.
Good UX: Users can open, scan, choose one value, and review the selected value after close.
Bad UX: Hiding two obvious critical choices in a dropdown.
Best fit: The user chooses one option from a moderate known list.
Avoid when: The option set is short and comparison matters.
Required state: Closed state with empty option or current selected value.
Accessibility burden: Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.
Common misuse: Custom select with no keyboard support or hidden selected state.

Text input

UI or UX: UI + UX - Single-line freeform data-entry control
UI guidance: Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field.
UX guidance: Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.
Good UI: A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.
Bad UI: The only instruction is placeholder text that disappears when the user starts typing.
Good UX: A user types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.
Bad UX: Validation fires on the first focus event and blocks typing before the user has had a chance to answer.
Best fit: The answer is short and user-authored.
Avoid when: The answer is a paragraph, comment, address block, or explanation requiring multiple lines.
Required state: Empty untouched state with persistent label and optional hint.
Accessibility burden: Associate every text input with a visible label or equivalent accessible name that matches the visible question.
Common misuse: Using placeholder text as the only label or instruction.

Decision rules

Prefer a combobox when users type or open a popup from a single field and must be able to move an active option, accept it, cancel without committing, and keep the submitted value synchronized with the visible label.
Prefer autocomplete when the product problem is completing a known value from suggestions, especially when the suggestion behavior matters more than the broader widget contract.
Prefer select when the option set is short or moderate, every choice can be shown directly by the native control, and users do not need to type to filter or copy the value from an editable field.
Prefer text input when arbitrary free text is valid and there is no controlled popup, selected option ID, active descendant, or allowed-value contract to maintain.
Use combobox instead of select when more than a handful of choices make scrolling inefficient and typing a partial label is the fastest path to one choice.
Do not auto-commit the first matching option in a manual combobox; the visible typed text and hidden selected value must remain different until the user accepts a specific option.
Expose aria-expanded, aria-controls, and aria-activedescendant when the popup is visible so keyboard and assistive technology users can perceive the same active option as sighted pointer users.
Close the popup with Escape without changing the previous committed value, unless the product explicitly documents a clearing behavior and announces it before submission.
Allow custom values only when the domain permits values outside the list; otherwise validate unresolved typed text as not selected and clear stale selected IDs after edits.
Use multi-select or chip selection instead when users must keep several values at once; a single-value combobox should not hide multiple committed choices inside one text value.

Inspect live examples

Combobox Autocomplete Select Text input

Failure modes

The user edits the visible label after selecting an option, but the old hidden ID is still submitted.
The popup appears visually but aria-expanded stays false and no controlled popup is exposed.
Arrow keys move DOM focus into arbitrary buttons, so the user loses text editing and active option context.
The first filtered result is committed as soon as the user types, replacing input the user never accepted.
Escape closes the popup after silently changing the selected value.
A short country or status list is rebuilt as a custom combobox instead of using a native select.