Autocomplete
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.
Multiselect
Use multiselect if users can select one or more keywords in their response.
Loading indicator
Use a loading message if there’s a delay in returning options based on the user’s input.
Single select example
Multiselect example
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.