Autocomplete predicts the word a user has started to type based on a pre-defined list and gives them the option to select it.

How to use autocomplete

Autocomplete speeds up interaction time and helps all users to make more accurate searches by avoiding spelling mistakes. It’s particularly helpful for users who may find spelling or data entry challenging.

When using autocomplete:

  • Show no more than ten possible keywords
  • Order the list of suggested keywords in a meaningful way, for example using relevancy or search history
  • Use ARIA live regions if the autocomplete triggers a change in page content to inform screen reader users of the change

If the list of possible options is small, use select instead.

Types of autocomplete

Single select

Use single select if users can select only one keyword at a time.

  • Interactive demo - Sainsbury's


Use multiselect if users can select one or more keywords in their response.

  • Interactive demo - Sainsbury's

Loading indicator

Use a loading message if there’s a delay in returning options based on the user’s input.

Single select example

  • Interactive demo - Sainsbury's

Multiselect example

  • Interactive demo - Sainsbury's

Copy guidelines

When using autocomplete:

  • Make the keywords complete and clear to help users understand the content associated with them

Was this page helpful?

Get in touch

Our team can answer any questions about using autocomplete or give you a helping hand with your next project.
Select a theme to demo: