USAGE

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 columns 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.

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.

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.

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.

Click SUBMIT without selecting an option in the dropdown..

Resources

https://baymard.com/blog/drop-down-usability https://www.nngroup.com/articles/drop-down-menus/ https://baymard.com/labs/country-selector (example of alternative to drop-down for long lists)

STYLE

States

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

Size

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

Full-width dropdowns are only allowed on the XS grid (0-479). In all other cases, inputs must span to a specified number of columns in the layout.

Disabled Dropdown

Active Dropdown

Focused Dropdown

Error State Dropdown