Dropdowns

Definition

Dropdowns (aka select menus) allow a user to select one item from a list of five to twelve options.

For lists of less than five options, consider radio buttons instead. For lists with more than twelve options, consider using a text input with auto-complete instead.

Full-screen width drop-downs are only allowed on the XS grid (0-479). In all other cases, dropdowns should span to a specified number of Cols in the layout.

Common Characteristics

Dropdowns are normally 40px high, but a small 32px alternative may be used. Whichever size is used, use the same size for any associated elements like text inputs and buttons.

All dropdowns have these states: disabled, active, and focused.

Select One...
Select One...

Usage Guidelines

Dropdowns are useful for presenting lists of options without cluttering up the UI. However, they are inefficient because they hide data and add clicks to the experience. They are also prone to usability problems, especially with very long lists, or on small screens. Therefore, use dropdowns cautiously—as a last resort—when other controls don't meet the need.

Do

  • Avoid dropdowns when possible, especially for short, or very long lists.
  • Consider dropdowns for lists of 5-12 items.
  • Consider dropdowns when users aren't familiar with the acceptable input options.
  • Support keyboard navigation within dropdowns for accessibility (tab, arrows, enter, characters).
  • Gray out unavailable options rather than hiding them.
  • Include placeholder text (e.g. “Select one…”), or pre-select an option when it is likely to assist a user.
  • Remember the last selection when it is likely to assist the user.

Don’t

  • Use dropdowns for less than 5 options. Instead, use radio buttons or button groups.
  • Use dropdowns for more than 12 options. Instead, use a text input with auto-complete (e.g. for Makes, Models, Sellers, Auctions, States/Provinces).
  • Use dropdowns for entries that are highly familiar to users. Instead, use a text input (e.g. birth years, Mr/Mrs/Ms).
  • Use dropdowns for State/Province. Instead, use a ZIP code text field and auto-populate the city and state in a single editable text field.
Select One...
Select One...

Disable options that are temporarily unavailable rather than hiding them.

Label Options

Labels are normally top-left of the dropdown. However, when vertical space is at a premium, right-aligned Labels are acceptable.

Select One...
Select One...

Right-aligned Labels save vertical space in the UI.

Validation

When a dropdown is required, validate that a selection has been made when the form is submitted and show an error if required.

Select One...
This is required
Select One...
This is required