Skip to content
UX Atlas
PatternCraft conventionIntermediate

Autocomplete and Typeahead

Suggestions as the user types, which turns recall into recognition when it is fast enough.

Definition

Autocomplete offers matching options in response to partial input. It reduces typing, prevents errors and teaches the vocabulary the system understands. It is also one of the most commonly mis-implemented accessible widgets.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Requirements
  3. In practice
  4. Sources
  5. Continue from here

Requirements

  • Respond within about 200ms, or the suggestions arrive after the user has moved on.
  • Debounce input, typically 150 to 300ms, and cancel in-flight requests when a newer one starts.
  • Full keyboard support: arrow keys to move, Enter to select, Escape to dismiss, Tab to leave.
  • Never steal the typed text. Inline completion that overwrites what the user typed causes errors.
  • Announce the number of suggestions to assistive technology through a live region.
  • Allow free text where the value may not be in the list, and be explicit about which mode the field is in.

In practice

Address lookup

Checkout

A single lookup field replacing five address inputs removes format errors entirely and speeds up the most abandonment-prone part of checkout.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA FormA Search Experience

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Alternative approach

A different answer to the same problem, with a different cost.

  • FilteringPattern

    Typing narrows faster when the vocabulary is known. Filters narrow better when it is not.

Check your work

Review passes that test whether this was done properly.