UX Patterns Guide
My learning 0 of 20 lessons complete
Start lesson 1 →
Back to compare picker

Combobox vs Autocomplete vs Select vs Text input

Use a combobox when one field owns a popup and the interaction depends on expanded state, active option movement, acceptance, cancellation, and selected-value synchronization; use autocomplete for known-value completion behavior, select for short finite choices, and text input for arbitrary free text.

Combobox live exampleAutocomplete live exampleSelect live exampleText input live example
Learn the decision

Match the interaction to the person's task

Use a combobox when one field owns a popup and the interaction depends on expanded state, active option movement, acceptance, cancellation, and selected-value synchronization; use autocomplete for known-value completion behavior, select for short finite choices, and text input for arbitrary free text.

Combobox

Use it when: Users choose one value from a large, dynamic, or filterable option set.

Make this state clear: Collapsed empty state with label, help text, and popup affordance.

Observe the result: 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.

Study the full pattern →

Autocomplete

Use it when: The list is long but values are known.

Make this state clear: Empty input state.

Observe the result: Typing filters suggestions while preserving the exact typed value.

Study the full pattern →

Select

Use it when: The user chooses one option from a moderate known list.

Make this state clear: Closed state with empty option or current selected value.

Observe the result: Users can open, scan, choose one value, and review the selected value after close.

Study the full pattern →

Text input

Use it when: The answer is short and user-authored.

Make this state clear: Empty untouched state with persistent label and optional hint.

Observe the result: A user leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error.

Study the full pattern →

Practice the judgment: Imagine this situation: The user edits the visible label after selecting an option, but the old hidden ID is still submitted. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.

Review the underlying principle →

Decision dimensions

Dimension ComboboxAutocompleteSelectText input
UI or UX UI + UX - Single-value input widget with owned popupUI + UX - Input widget with suggestion behaviorUI + UX - Single-choice dropdown controlUI + 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.Expose clear visual states for expanded, focused, highlighted, and selected options.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.Preserve typed input and make selection reversible before submission.Help the person reach a clear task outcome.Let users edit normally, validate after interaction or attempted submit, preserve their typed value after errors, and explain exactly how to fix invalid or missing text.
Good UI A Department field opens a list of matching departments, keeps focus in the field while the active option moves, and clearly marks the committed department.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 visible assignee name changes after typing while an old hidden user ID remains selected for form submission.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 leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error.
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.Using autocomplete where users expect broad search results.Using select to hide two or three obvious choices that should be compared.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
A Department field opens a list of matching departments, keeps focus in the field while the active option moves, and clearly marks the committed department.
Bad UI
A visible assignee name changes after typing while an old hidden user ID remains selected for form submission.
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
Expose clear visual states for expanded, focused, highlighted, and selected options.
UX guidance
Preserve typed input and make selection reversible before submission.
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
Using autocomplete where users expect broad search results.

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 the person reach a clear task outcome.
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
Using select to hide two or three obvious choices that should be compared.

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
Let users edit normally, validate after interaction or attempted submit, preserve their typed value after errors, and explain exactly how to fix invalid or missing text.
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 leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error.
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
ComboboxAutocompleteSelectText 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.

Saved items