Skip to main content

Dropdown

A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button. Dropdowns are typically used for forms.

Best practices​

Layout​

  • Use a dropdown when there are multiple choices that can be collapsed under one title, if the list of items is too long, or when there's space restriction.
  • Use a dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible, putting equal emphasis on all options).

Content​

  • Use sentence-style capitalization (only capitalize the first word.)
  • The dropdown label should describe what can be found in the list of options.
  • Use shortened statements or single words as list options.
  • If there isn't a default option, use "Select an option" as placeholder text.
  • If "None" is an option, include it.

Drop Drown​

States​

Transitions​

TransitionsFront ViewIsometric View
Appear--
Enter--
Exit--
Interact--
Behavior--
Disappear--