UX Patterns Guide

Application · lesson 24 of 34 · Input And Data Entry

Autocomplete

Underlying principle: An input pattern carries a question, an expected answer, and a consequence. Visible labels, suitable controls, tolerant entry, and specific recovery keep that agreement clear.

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

Start with the decision

Does this fit your task?

The list is long but values are known.

Review the boundary: Compare the task with the alternatives in the decision section.

Review the decision →
Try the live example →Compare alternatives →
Study the interaction

Follow the task before choosing the component

An input pattern carries a question, an expected answer, and a consequence. Visible labels, suitable controls, tolerant entry, and specific recovery keep that agreement clear.

01 / Recognize the need

What the person is doing

The accepted values come from a known or searchable dataset.

02 / Design the response

What the interface must communicate

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

Empty input state.

03 / Judge the outcome

What to look for

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

Typed text remains under user control.

Practice this pattern: Sketch autocomplete for this situation: The list is long but values are known. Include this state: Empty input state. Review your sketch with this question: Is the user completing a known value rather than discovering unknown content?

Study the Input And Data Entry family →Read the underlying principle →
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

The accepted values come from a known or searchable dataset.

Test the behavior

Try strong and weak versions of the interaction

Open the working example, try its controls, and compare the behavior against the decision guidance.

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.

Failure to inspect

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.
  • 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