Skip to main content

Specifications

Dropdowns Spec

Behaviors

  • 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.
  • 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.
  • Dropdowns are activated by tapping.
Default Pressed Active Active Focus Disabled

Editorial

  • Use title case for titles, unless the title is phrased as a question (e.g. Are you sure want to continue?). Use sentence case for questions.
  • Titles should clearly describe what’s inside the modal and the action required.
  • Consider using words from the context of the page that launched the modal.
  • Content can scroll in the modal, if necessary. Avoid long copy in modals.
  • 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.
  • Don’t use “deselect.” Instead, use “clear.” The term “deselect” causes a problem for localization.
  • The list of options should be sorted in a consistent order (alphabetical, chronological, the most selected option, or by order of importance).
  • Don’t end text in a select with a period.
  • Keep option names as brief as possible. Aim for under 5 words.
Last updated November 14, 2023.