To help a user make a selection in a long list, a dropdown typeahead shows suggestions as soon as the user starts typing.

Usage

When users need to select from a long list of options, use the dropdown typeahead. As soon as the user starts typing, the list changes to show suggestions that should get closer to what the user wants.

The dropdown typeahead offers two ways to make a choice:

  • A user can select from a dropdown list of options contained in a popover. This is especially helpful when the list of options is small, say, no more than five.

  • Or a user can start entering copy in a text input field, as in search. The system automatically suggests search terms based on the characters the user entered. As characters are typed into the input field, matching and partially matching selections show up in an alphabetically ordered list. As the user enters more characters, the list gets refined, showing a smaller and hopefully more accurate set of options to choose from. Users don’t have to enter characters or words accurately or in any specific order. The system shows results based on whatever the user enters.

Appearance and behavior

Since dropdown typeahead suggestions appear in both dropdown lists and text fields, the pattern is a combination of a text field and a dropdown. The typeahead functionality works with these patterns to help users make a single selection from a list.

As the user types, matching or partially matching selections appear in a list through a popover container. The characters or words provided don’t have to be accurate or sequential for the application to show results. As the user types in the field, the application dynamically filters the list to show only options that match the typed characters.

Results appear in alphabetical order. As the user enters more characters, the application refines the list, giving the user a smaller set of options to choose from.

Content guidelines for typeahead suggestions

  • In a dropdown list, the terms users can select are generally predetermined and appear in alphabetical order.

  • If those terms are two or three words and aren’t proper nouns, make sure they appear in sentence case. Example: Find an accountant

  • When guiding a user to make a selection in a drop-down list, use “select” (not “choose”). Example: Select a customer

Dropdown typeahead examples

 

Coming soon

  • Was this Helpful?
  •