Autocomplete
Autocompletes allow users to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted), and receive one or more suggested matches in a list below the input.
Table of Contents
Edit this section, Opens in new windowOverview
Unlike a Select (single- or multi-) that lets you select options from an options menu, the Autocomplete component has other behavior beyond choosing an option as the value for a setting, such as linking to other content.
Other relevant components:
Variations
Type | Purpose |
---|---|
Autocomplete string | This version is used when you want users to select from string matches and items. |
Autocomplete tags | This version is used when you want users to selected predefined tags, like filters. |
Usage
Principles
- User can type, and if suggestions is found, they appear with the matched string highlighted
- User can navigate through the suggestions with ↑ UP and ↓ DOWN arrow keys
Behaviours
The default behaviour of the autocomplete input element is like any other input element. They key difference is a list of suggestions popping up when typing.
Interactions
No results
When no results is found, a "No results" message is displayed
Loading state
If autocomplete options are likely to take longer than 1 second to show for the majority of users, display a loading indicator.
Focus
The autocomplete suggestion element follows the same principles for default focus styling when keyboard is used:
2px
dotted outline
with color BL 1, BLUE.
No general mouse focus, but when an item is hovered or selected, it receives fill color BE 3, LIGHT BEIGE
Autocomplete string
The autocomplete string version is used when you want users to select from string matches and items.
For example search, with the Search Field component:
Open pages
Autocomplete tags
Usage
Principles
- Tags are created either with comma separated words or space separated phrases
- If applicable a predefined set of tags can appear as autocomplete with suggestions
- User can navigate through the suggestions with ↑ UP and ↓ DOWN arrow keys
- User can use backspace to remove tags
- User can click the cross in the tag to remove the tag
- Every tag removed is put back into the array of suggestions, for historical usage
Anatomy
The autocomplete suggestions follow the same principles as a basic autocomplete.
Accessibility
See WAI-ARIA Authoring Practices 1.1: Combo Box and ARIA 1.1 Combobox with Listbox Popup Examples for more details.
Keyboard navigation
- When tabbing forward or backward through the page, let the autocomplete text input take keyboard focus with the tab key
- Let people navigate through the list of autocomplete options using the up and down arrow keys
- Let people select the option that has focus using the Enter key
Announcements
Let people using screen readers know when new options are presented while typing. This requires testing to avoid excessively noisy announcements.
If the Autocomplete component causes a change to content on the page, use ARIA live regions to inform screen reader users of what's changed.
Anatomy
- Suggestions: the bit that drops down from an input field to show Autocomplete suggestions.
- Autocomplete suggestion item: the suggestions menu that lets you choose a suggestion.
- Each suggestion may be presented as plain text or with icons.
- Suggestions
- Selected/Hovered
- Emphasized matched string