Use a select dropdown when the user needs to pick from a number of values (for examples, when a user needs to select a customer or payment type). When we’re presenting the user with a long list of options, use the dropdown with select typeahead to make it easier for users to get through the list.
Appearance and behavior
Standard select dropdown
Default / Hover / Expanded / Expanded hover / Selected
Select dropdown with typeahead
To see how the select dropdown with typeahead suggestions looks and behaves, see the select typeahead pattern.
Here are some examples of the select dropdown on mobile devices. In these cases, tapping on the control opens a full-page modal that presents the selections. When typeahead suggests appear, the select dropdown also opens in a full-page modal, but the customer also sees an option to start entering a selection. Once the user starts typing, suggested selections appear.
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.