Skip to main content

Dropdown

Description​

Dropdowns (otherwise known as Select Menus) allow a user to select an option from a pre-defined list. Lists of five to twelve options are most suitable for the dropdown component. For lists of less than five options, consider radio buttons. For more than twelve options, consider using a combobox.

Sizes​

Dropdown sizes are large, medium (default), and small. Dropdown width is determined by its content, layout requirements, and minimum left/right padding.

Designers are free to adjust dropdown widths wider than the minimum, but full-width dropdowns should be reserved for narrow layouts such as mobile screens or narrow slideouts.

Usage​

Scale Alignment​

Always match the dropdown size with the button size: i.e., medium dropdowns with medium buttons; small dropdowns with small buttons.

Use medium (default) dropdowns in most cases. In dense layouts where vertical space is at a premium, small dropdowns may be used on large screens. Small dropdowns are never used on mobile screens. Large dropdowns may be an appropriate option for certain applications intended for tablet use in the field.

Coming Soon: Example of scale alignment

Labels​

Labels are top aligned (default), right aligned, or hidden. The default is best for most scenarios.

Only use right aligned labels when it is necessary to save vertical space.

Hidden labels should be used with caution and only when there are very few fields (e.g., a sign in form), or where the required input is very well understood by the user (e.g., the user’s street address). Hidden labels must still be represented in the code for accessibility purposes.

Required vs Optional​

When designing forms, aim to include only required fields. Avoid optional fields unless designing a search/filter scenario where all fields may be optional.

When a mix of required and optional fields cannot be avoided, mark fields as “optional” or “required” next to the label. Do not mark required form fields with an asterisk (*). Optionally, designers can include a text instruction, “All fields are required.” at the top of the form. Give required fields priority in the field order when possible.

Coming Soon: Example of do/do not with required versus optional and exceptions

Validation​

When dropdown input is required, validate the input on submit, and display a validation message if necessary.

Helper Text​

Dropdowns can optionally display helper text below the input. Helper text should be very brief (single line if possible) and explanatory. When an input fails validation, helper text is replaced by a validation message.

Unavailable Options​

When an option is temporarily unavailable, disabled it rather than hide it.

Usability​

Dropdowns are useful for presenting lists of options without cluttering up the UI. However, they are inefficient because they also hide data and add clicks to the experience. They are also prone to usability problems 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​

  • Consider dropdowns for lists of 5-12 items.
  • Consider dropdowns when users aren't familiar with the acceptable input options.
  • Disable unavailable options rather than hiding them.
  • Include placeholder text (e.g., “Select one…”) or pre-select a default option when it is likely to assist a user.
  • Remember the user’s selection when it is likely to assist the user.

Don’t​

  • Use dropdowns for less than 5 options. Instead, use radio buttons or a button group.
  • Use dropdowns for more than 12 options. Instead, use a combobox.
  • Use dropdowns for State/Province. Instead, use a ZIP code text field and auto-populate the city and state. Alternatives to consider are [combobox] or autocomplete when there is no ZIP code.

Coming Soon: Example of do/do not

Best Practices​

Content​

List titles should be concise and scannable:

  • Use simple, clear language that can be read at a glance
  • Keep list titles to a single sentence
  • End titles that introduce a list with a colon.
  • Write in sentence case

List choices:

  • Start with a capital letter
  • Do not use commas or semicolons at the end of each line
  • Write in sentence case (the first word capitalized, the rest lowercase)