Refine By

Selection dropdowns

  • Contents:

Selection dropdowns:

  • Allow users to select a single option from a list
  • Declutter UI by keeping options collapsed
  • Leave more space than do columns of checkboxes

Guidelines

 

  • Allow a single selection from a dropdown list.
  • To allow multiple selections, use an accordion and/or a set of checkboxes.
  • iOS and Android app should follow Picker component from their system guidelines.
  • Use predictable and logically ordered values.
  • Offer a neutral option (e.g. “None,” “Not applicable”) if applicable.

Style

 

Accessibility

 

  • Make sure your dropdown has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the dropdown read “Select a state” by default).
  • Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Jul. 26 2019 3:43pm Merged the Dropdown sketch UI kit into the Form Element file so they share the same file and link.
May. 08 2017 4:51pm Initial content entry