Playground
  • Introduction
  • Components

Autocomplete

Predicting and suggesting completions for a value the actor is actively typing, so they can pick from a narrowing set of options instead of finishing the thought themselves.

Autocomplete

Part of the assisted task completion spectrum, at the most reactive end — the system takes almost no initiative here.

Design considerations

  • Recent and frequent items often beat algorithmic suggestions, or at least deserve a spot alongside them
  • Worth distinguishing narrowing (filtering a known list) from expanding (proposing related or trending terms the actor hasn’t thought of)

Related components

  • Input — the primitive that autocomplete builds on
  • Combobox — component this pattern builds on
  • Combobox — that stance’s large-scale control: autocomplete mechanics with a candidate-channel commit

Resources & references

  • Baymard Institute 9 UX best practice design patterns for autocomplete suggestions
  • Friedman Five simple steps for better autocomplete UX. Smart Interface Design Patterns

Related patterns

Precedes

  • AI completion — autocomplete's candidates are looked up, not produced — deterministic completion ends where the continuation has to be generated; AI completion extends the same interaction to generated content

Enables

  • Data entry — autocomplete as a way to reduce input friction

Enacts

  • Learnability — suggestions teach people what options exist

Complements

  • Autofill — the preemptive counterpart: pre-populates from stored values rather than completing what the actor types (and what the HTML `autocomplete` attribute actually controls)
  • Bounded choice — the selection autocomplete often serves
  • Assisted task completion — the spectrum autocomplete sits within
  • Suggestion — system-generated recommendations more broadly
  • Searching — autocomplete in search fields is really a seeking pattern
  • Command menu — autocomplete applied to actions and navigation
  • Filtering — autocomplete within filter value selection

Preceded by

  • Good defaults — fields hold the system's best static guess — which serves only until the actor starts typing a value of their own; completion then has to happen in flight rather than up front

Hosted by

  • Form — form fields are where the completion surface most commonly lives