Explore behaviors before defining the interface.
Quick guide for designers
When to use
Use when suggestions help find or fill a value. For a few visible options, consider a simpler control.
What to design
Show the label, field, suggestion list, active option, committed value, loading, no options, and failure.
How it behaves
Typing requests suggestions. Navigating options need not commit a choice; Enter commits according to the documented pattern.
What to document in Figma
Define free or restricted input, query triggers, committing, canceling, and the effect of leaving the field.
How to review
Check states in the design. In the implementation, verify editing, the active option, and committing with keyboards and screen readers.
Choose the behavior
- Are suggestions mandatory values, or can people commit text absent from the list? Is this rule available before entry?
- This guide adopts an editable combobox with a suggestion list and explicit commitment. Multiple selection is another pattern, discussed in Select.
- Does lookup start on focus, typing, or a minimum character count? Does the interface explain when more characters are needed?
Options and states
- Can typed text, the active option, and the committed value be distinguished? Do similarly named suggestions provide enough context to choose?
- Do loading, no suggestions, and failure have different messages? Does a failure preserve input and allow retry?
- Does the list remain usable with a virtual keyboard, magnification, and long labels? Does the active option remain visible while scrolling?
Commit and cancel
- What happens when clicking a suggestion, pressing
Enter, leaving withTab, or closing withEsc? In this guide’s pattern,Esccloses without committing a merely highlighted option. - After commitment, does editing invalidate the previous choice? Document the relationship between displayed text and the saved identifier.
Interaction Methods
Mouse and touch
Clicking or tapping a suggestion commits its value. The list must not disappear before activation completes.
Keyboard
Tab enters the field. Typing, selection, copying, and pasting retain native editing commands.
With the list open, Down and Up arrows navigate suggestions; Enter commits the active option; Esc closes the list without committing a merely highlighted option.
Tab leaves the field without traversing every suggestion. In this explicit commitment pattern, leaving does not automatically commit the active option.
Screen readers
On focusing the field with a screen reader, people identify its name and whether suggestions are open. Using Up or Down arrows navigate options and identify the active option; Enter commits it.
With a mobile screen reader, people type using the virtual keyboard, traverse suggestions with the reader’s navigation gestures, and double tap the focused option to commit. The list may report the count or absence of suggestions after the response.
Gherkin
BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).
Scenario: Given that I am on a page containing Autocomplete
Educational scenarios for reviewing behavior. Adapt them to context and execute them in the implementation; the presence of this text does not mean tests were performed.
Keyboard navigation
- WHEN I use
Tabto focus the field and type a term with suggestions - I SEE focus and can navigate suggestions with
arrow navigationwithout preventing native text editing - THEN, when I press
Enter, I SEE the committed value; pressingEscbefore commitment closes the list without saving the merely highlighted option
Screen reader on desktop
- WHEN I navigate to the editable combobox with a desktop screen reader
- I HEAR its label, expanded state, and active suggestions while navigating
- THEN, when I commit a suggestion, I HEAR or perceive the committed value and list closure according to the defined pattern
Screen reader on mobile devices
- WHEN I focus the field with a mobile screen reader and type a term
- I HEAR or perceive available suggestions and can explore them with platform gestures
- THEN, when I activate a suggestion, I HEAR or perceive the committed value without relying only on visual highlighting
Additional scenarios — editorial extension
Navigate without committing
- GIVEN available suggestions
- WHEN I navigate with
arrow navigationand pressEsc - THEN the list closes without saving the merely highlighted suggestion and I can keep editing.
Commit an option
- GIVEN an active option
- WHEN I press
Enteror activate it by touch - THEN the field displays the committed value and the list closes according to the documented rule.
Out-of-order responses
- GIVEN successive queries
- WHEN an older response arrives after the latest one
- THEN it does not replace current suggestions or change the committed value.
No match with restricted input
- GIVEN input restricted to options
- WHEN I try to commit unmatched text
- THEN I receive guidance associated with the field, the text is preserved, and no old identifier is submitted as the new choice.
Points to consider
Suggestion autocomplete differs from the HTML autocomplete attribute, which informs browser autofill.
Do not place actionable links or buttons inside listbox options. Content with independent actions requires a different pattern.
Request cancellation and stale response handling need implementation. The design documents intent but does not prove the behavior.
Implementation notes and behavior decisions
Expose the name, expanded state, and relationship to the list. With aria-activedescendant, DOM focus remains in the field and the active option must exist and be identified in the list.
The count or absence of suggestions can be communicated after a response without announcing every keystroke. Also verify exploration and commitment with a mobile screen reader.
References
Additional references for components of type Autocomplete.
Important:
Most references are on the course platform alongside the lessons cited in this material.
Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.
Technical references and examples consulted for this editorial adaptation. Each source retains its scope; consulting an example does not prove accessibility of another implementation.