Use a select drop-down 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 drop-down with select typeahead to make it easier for users to get through the list.
Appearance and behavior
Standard select drop-down
Default / Hover / Expanded / Expanded hover / Selected
Select drop-down with typeahead
To see how the select drop-down with typeahead suggestions looks and behaves, see the select typeahead pattern.
Here are some examples of the select drop-down 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 drop-down 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 drop-downs
- Present drop-down selections in sentence case (“Select an account”). If the drop-down 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 drop-down. 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.