Autocomplete usage
Autocomplete is intended to speed up a user’s workflow by helping them narrow down options in a long list.
- Autocomplete
- Used to filter large data sets
- Minimizes the number of characters the user has to type
- Reduces cognitive load of filtering large datasets
- Select
- Used for small data sets
- Easier to implement
Autocomplete can be implemented in one of two ways.
- Filtering
- User can only select from the list of provided Autocomplete Options
- Commonly used when a selection is required
- Autocomplete Options contain left margin to allow for a
<Check />
icon indicating the selected option - Autocomplete Options will be filtered out based on user input
- Searching
- User input will be used to search through a provided set of suggested options
- This enables a list of standardized options, e.g. job titles or industries
- Importantly, any input is considered valid and will be submitted with the form
- This enables the user to input their own value if the provided options won’t suffice
- Autocomplete Options are aligned to the left as there is no selected state
- Autocomplete Options will be filtered out based on user input
- User input will be used to search through a provided set of suggested options
Users can get overwhelmed when too many options are provided to them. We also want to avoid making the user scroll—especially on smaller screens.
Groups are sometimes necessary to separate content and provide context to the user.
<AutocompleteSeparator />
to help visually differentiate between groups or options.Too many lines of text can create unnecessary cognitive load.
To remain accessible, the Autocomplete Listbox cannot contain any interactive content other than Autocomplete Options.
Icons should be used to augment the options and provide additional context to the user. They should not be used purely for decoration. When using Autocomplete as a select menu, the check icon will appear next to selected options.
- Autocomplete will occupy the width of its container and will shrink and grow depending on the size of the viewport
- Text within Autocomplete Options will wrap in smaller viewports
- Autocomplete Listbox will position itself above or below the Autocomplete Field depending on scroll position
- Be concise; space is tight
- Use sentence case for text that isn’t a proper name