When users need to select from a long list of options, use the drop-down typeahead. As soon as the user starts typing, the list changes to show suggestions that should get closer to what the user wants.
The drop-down typeahead offers two ways to make a choice:
- A user can select from a drop-down 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 drop-down typeahead appears in both drop-down lists and text fields, the pattern is a combination of a text field and a drop-down. 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.
Examples of drop-down typeahead
Typeahead for a form field combo box
Typeahead for a table cell combo box
Typeahead for a table cell combo box, option selected
Typeahead for a table cell combo box, no matches
Content guidelines for typeahead suggestions
- In a drop-down 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
- Recommended voice and tone attribute: straightforward