Skip to content

Autocomplete usage

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

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 a Button added to the OptionShowing an Autocomplete Listbox with filter functionality pinned at the topShowing 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.

Showing Autocomplete Options with unnecessary icons, like hearts and smiley faces
Don’t use icons purely for decoration
Showing the default check icon has been replaced with a non-standard checkmark
Don’t override the check icon for the selected state
Showing the color of the default check icon has been changed to kale
Don’t override the check icon color
Showing Autocomplete Options with an icon sitting next to a generic icon
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