Interactions · Search
Autocomplete
Also called: Typeahead, Autosuggest, Search suggestions, Combobox
As the user types, matching suggestions appear live below the input. They can pick one with the mouse or arrow keys, which means less typing and fewer typos.
In detail
Autocomplete is common in search boxes (type "phone" and it suggests "phone case" and "phone stand"), address fields, picking members or tags, and completing email domains. It handles long option lists better than a dropdown select. Users don't have to scroll through hundreds of options, since typing a few letters narrows it down.
Details to think about: debounce the input so you don't send a request for every letter; highlight the matching text in suggestions; support up/down arrow keys to move, Enter to select, and Esc to close; show "No results" when nothing matches; show loading while the request is in flight. Also decide whether users can enter something that isn't a suggestion. A search box can allow it; a city picker can't.
Note that the autocomplete attribute on browser forms is a different thing. It controls whether the browser autofills saved accounts, addresses, and other info.
Developer infoTerm ID, DOM cues, match priority
- Term ID
interaction-autocomplete- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026