Autocomplete is an input field that provides selectable suggestions as a person types. It lets people quickly search through and select from large collections of options.
Figma
The Figma reference for Autocomplete will appear here once the design link is added.
Storybook
Interactive examples for Autocomplete will render here once the Storybook link is wired in.
Best practices
- Be clearly labeled so it’s obvious what type of options will be available.
- Limit the number of options displayed at once.
- Indicate a loading state while option data is being populated.
- Follow the same content guidelines as text fields for the input itself.
Do’s and don’ts
Do
Use autocomplete as a progressive enhancement that makes the interface easier to use for most people.
Don’t
Require people to make a selection from the autocomplete to complete a task.
Accessibility
- Based on the ARIA combobox and listbox patterns; the suggestion list appears below the input by default so it’s easy to discover.
- The text input is reachable with Tab; options are navigated with the up/down arrow keys and chosen with Enter.
- Never make autocomplete the only way to search or enter data — some assistive technologies struggle with it.