Autocomplete usage

Autocomplete provides fast filtering of large datasets through live search results based on user input.

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

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.

Showing an Autocomplete Listbox with six options

Limit the number of visible options to six.

Groups are sometimes necessary to separate content and provide context to the user.

Showing an Autocomplete Listbox separated into groups of engineers and designers

Group content to separate categories.

Showing a bordered separator between Autocomplete Options

Optionally use a <AutocompleteSeparator /> to help visually differentiate between groups or options.

Too many lines of text can create unnecessary cognitive load.

Showing an Autocomplete Option with two lines of text

One line of text is preferred but no more than two. The first line should include the primary content, such as a name.

Showing Autocomplete Options using the pipe symbol to separate themed content

Separate additional content on the second line with a “|”.

Showing Autocomplete Options within an Autocomplete Group

Consider using a group label for related options.

To remain accessible, the Autocomplete Listbox cannot contain any interactive content other than Autocomplete Options.

Showing an Autocomplete Listbox with filter functionality pinned at the top

Showing an Autocomplete Listbox with a fixed footer with contextual information

Do not put any interactive content inside the listbox or option, such as a Link or Button.

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.

Don’t use icons purely for decoration

Don’t override the check icon for the selected state

Don’t override the check icon color

Don’t place icons next to images

Showing Autocomplete Options with an illustration next to names

Don’t use illustrations

Showing the effective use of icons of a home and office to differentiate between home and work addresses

Use icons to provide additional context to the user

Icons are optional but should be applied to all options within the Listbox when used

Align icons and images to the left of the label

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