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 ContentsEdit this section, Opens in new window
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:
|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.|
- 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
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.
FocusEdit this section, Opens in new window
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:
See WAI-ARIA Authoring Practices 1.1: Combo Box and ARIA 1.1 Combobox with Listbox Popup Examples for more details.
- 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
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.
- 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.