Skip to main content


The autocomplete is a text input field enhanced by a panel of suggested options.


An autocomplete dropdown allows the user to search and select one option from a set of choices. When the user enters text into the input field, a list of suggestions are provided.

Autocomplete Example


Use when

  • Searching and results can be auto-populated.
  • Application requires predictive, suggestive or instant search results.
  • Filtering list items.
  • Single selection from a list is necessary.

Don’t use when


Autocomplete comes in three varieties:

  • Basic Autocomplete: Typical “search-as-you-type” function that matches what a person is typing, usually the beginning of a word, or a prefix, part of a word or with a word list.
  • Autocomplete Suggestions: Suggestions not only predict user intentions, but they also help users construct more useful searches than they might on their own. Suggestions go beyond matching text strings by including new search items within the suggested results. It is useful during information-seeking tasks, where there isn’t a single “right answer.”
  • Instant Results: Sometimes users may prefer to autocomplete actual search results instead of retooling their search phrase. For example, the display of rich information right in the autocomplete instead of a list of suggestions that lead to a search results page.

Autocomplete Types

What's changed
Date Version Notes Contributors
03/30/2022 1.3.0 New component submitted. S. Edwards, E. Gunther, C. Rodriguez, D. Zambrano