UX Patterns Guide
UI + UX Input And Data Entry standard

Autocomplete

Let users type into an input and choose from matching known values, while keeping typed input visible and editable.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • The list is long but values are known.
  • Users can identify the target by typing part of it.

Avoid when

  • The task is open-ended query exploration.
  • The option set is short enough to show as radio buttons.

Problem it prevents

Users need to enter a known value quickly without memorizing exact spelling, codes, or names.

Test the behavior

Open the interactive example when you need it

The full lab is intentionally loaded on request. That keeps this reading page fast while preserving the strong and weak states, keyboard checks, and failure scenarios.

In the lab you can
  • switch between strong UI, weak UI, strong UX, and weak UX;
  • trigger required, empty, loading, error, and recovery states;
  • inspect keyboard and accessibility expectations beside the demo.
Launch Autocomplete in the lab
Pattern anatomy

What a strong implementation has to make clear

User need

The accepted values come from a known or searchable dataset.

Pattern promise

Let users type into an input and choose from matching known values, while keeping typed input visible and editable.

Required state

Empty input state.

Recovery path

Unexpectedly replacing typed input.

Access contract

Expose combobox expanded state, active descendant, and option labels.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.
  • Suggestions include enough secondary text or spacing to distinguish similar values without crowding.
  • Typing filters suggestions while preserving the exact typed value.
  • Clicking or pressing Enter on a suggestion commits it and keeps the final value editable.
Weak implementation

Vague, hidden, hard to recover from

  • Placeholder-only label that disappears after typing.
  • Popup visually detached from the field, tiny options, or highlight shown only by low-contrast color.
  • Automatically forcing the first suggestion into the field.
  • Submitting a stale hidden ID after the user edits the visible text.
UI guidance
  • Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.
  • Expose clear visual states for expanded, focused, highlighted, and selected options.
UX guidance
  • Help users complete a known value faster without forcing an incorrect suggestion.
  • Preserve typed input and make selection reversible before submission.
Implementation contract

What the implementation must handle

States

  • Empty input state.
  • Suggestion popup state.
  • Highlighted option state.
  • Selected value state.

Interaction

  • Typed text remains under user control.
  • Selecting an option updates the input and selected value consistently.
  • The popup state is exposed to keyboard and assistive technology users.

Accessibility

  • Expose combobox expanded state, active descendant, and option labels.
  • Keep typed text perceivable when suggestions appear.
  • Arrow keys move through suggestions.
  • Enter commits a highlighted suggestion.

Review

  • Is the user completing a known value rather than discovering unknown content?
Evidence trail

Source-backed claims behind this guidance

Ontario Design System Autocomplete

Ontario Design System - checked

Ontario autocomplete guidance supports text input with popup suggestions, combobox semantics, keyboard behavior, and known-value selection.

Full agent/debug reference

Problem Context

  • The accepted values come from a known or searchable dataset.
  • Typing part of the value is faster than browsing the whole list.

Selection Rules

  • Choose autocomplete for constrained or semi-constrained values.
  • Keep free text valid only when the domain permits it.
  • Show enough context to distinguish similar suggestions.

Required States

  • Empty input state.
  • Suggestion popup state.
  • Highlighted option state.
  • Selected value state.
  • No matching option state.

Interaction Contract

  • Typed text remains under user control.
  • Selecting an option updates the input and selected value consistently.
  • The popup state is exposed to keyboard and assistive technology users.

Implementation Checklist

  • Use native datalist where sufficient or an accessible combobox implementation.
  • Expose active option and expanded state.
  • Handle slow remote results and stale responses.
  • Validate final value according to domain rules.

Common Generated-UI Mistakes

  • Forcing the first suggestion when the user did not choose it.
  • Using autocomplete where users expect broad search results.
  • Showing identical labels without disambiguating context.

Critique Questions

  • Is the user completing a known value rather than discovering unknown content?
Accessibility
  • Expose combobox expanded state, active descendant, and option labels.
  • Keep typed text perceivable when suggestions appear.
Keyboard Behavior
  • Arrow keys move through suggestions.
  • Enter commits a highlighted suggestion.
  • Escape closes the popup without clearing the input.
Variants
  • Inline autocomplete
  • List autocomplete
  • Combobox autocomplete
  • Address autocomplete

Verification

Source trail checked:

Saved items