Use a dropdown when the user needs to pick from a number of values, for example, when a user needs to select a customer or payment type. Use a dropdown typeahead when we’re presenting the user with a long list of options (more than five).

Appearance and behavior

Dropdown

Dropdown with typeahead

To see how the dropdown with typeahead suggestions looks and behaves, see the dropdown typeahead pattern.

 

Responsive behavior

We’ll update this with more details soon.

Content guidelines for dropdowns

  • Present dropdown selections in sentence case (“Select an account”). If the dropdown list contains formal names, such as customer names or accounts, then those selections will appear in title case.
  • Use “select” (not “choose”) when referring to the items in the dropdown. We use “choose” when referring to a customer decision that isn’t UI-related. Example: Choose whether you want to consult a bookkeeper or an accountant.
  • Don’t use “deselect.” Instead, use “clear” (unless you’re writing for QuickBooks for Mac). The term “deselect” causes a problem for localization.
  • Make sure the items in the list are in logical order (alphabetical, chronological, order of importance, etc.).
  • If no item is preselected, use something like “Select a vendor” or “Select an account” in ghost or hint text format. If you can’t gray out the text, you can use some kind of indicator, like parentheses. For example: “(Select one)”.
  • If you need to, you can display ”None” as one of the options. It should have the same text formatting as the other options in the list.

Dropdown typeahead examples

 

We’ll share examples of dropdown typeahead suggestions soon.

  • Was this Helpful?
  •