Selects allow the user to choose from predefined options.

Global patterns.

Design Guidelines#

Use when#

  • To select from 4+ predefined options
  • In forms
  • To enter data

Don't use when#

Select Labels#

  • Labels should have a short description of the requested input (1-3 words).
  • Labels should be written in sentence case (the first word capitalized, the rest lowercase).
  • Avoid punctuation and articles ("the", "an", "a").
  • Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.

Select Options#

  • Have a default option selected whenever possible.
  • Start with "Select" as a placeholder if there is not a default option.
  • Be listed alphabetically or in another logical order so options can be found easily.
  • Be written in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option.
  • Be clearly labelled based on what the option will do.



Preview examples in Storybook

  • Default option for selecting a single value from the list of options.


Preview examples in Storybook

  • Use for selections that are currently unavailable. The surrounding interface should make it clear why the select is disabled, and how to activate it.


Preview examples in Storybook

  • Use when loading options.

Option Group

Preview examples in Storybook

  • Use when categorization of options is required.


Preview examples in Storybook

-Use when multiple options can be selected.


  • Always disable unavailable options instead of removing them.
  • Always open selects on click.
  • Always close menus after a menu item is clicked unless the multiple options is in use.
  • Never open selects on hover.

Related components

Last updated on by KimLBrooks