Appearance and behavior
Dropdown with typeahead
To see how the dropdown with typeahead suggestions looks and behaves, see the dropdown typeahead pattern.
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