Select

We use single selects to allow our users to choose a single option from a list, presented in a dropdown. We typically see these selects on forms.

If you want users to select multiple options, use a multi select, and if you want users to select from a tiered set of options, use a tiered select.
Demo and Developer GuidelinesFigma Component

Anatomy

There are multiple variations of single select components that can be used. However, all variations include a placeholder value, chevron icon, and options list.

Placeholder Text

Single select placeholder text is sentence case without punctuation. All select placeholder text says, “Select [item]”

Character Count Limit: 30

Options

Options are sentence case with punctuation.

Character count limit: 30 (unless it is a proper noun or a user-inputted option)

Types

Single Select

Single select allows users to select one item from a predefined list of options. When the user opens the menu, the first option is selected, and as the user hovers or arrows down the options, selected options are highlighted.

Single Select + Suggested Option

Single select with a suggested option allows users to select one item from a predefined list of options. When the user opens the menu, the system will scroll to a selected suggested option.
Notice the highlighted option is not the first item.

States

Behavior

Variations

Specifications

Padding

Standard Padding

Styling