Select

This component allows users to select an option from a list of five or more choices, and generally requires a final submit action to confirm the selection.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

The select component has been redesigned to include accessible behaviors and states. It also features new border colors, icons, and text from the new foundations.

When to use

Although the select and dropdown components are visually similar, they are used for different purposes. The radio button component can also be used to provide users with a set of options.

ComponentUse cases
SelectUse the select component if the user must select only one option from a list of more than five options. Select and dropdown are visually similar, however, the appearance of the select component will be determined by browser and device settings.
DropdownUse the dropdown component to filter, sort, or change page content. Unlike the select component, the dropdown component can be styled to match the look and feel of the design system. Dropdowns can also accommodate multi-select capabilities and different formats.
Radio buttonUse radio buttons if the user must select only one option from a list of five or fewer options. For more than five options, use the select component, which keeps the design compact.

Anatomy

The select component anatomy features the select input prompt and its parts, as well as menu of options, which is not customizable.

The select prompt contains three primary elements:

  1. Label: describes the input category.
  2. Select field: contains optional placeholder text, which is replaced by the selection.
  3. Helper text: informative message.

When a user selects the input, a list of options drops down from the field.

  1. Menu option list: styled by browser and device.

Articles

Listboxes vs. Dropdown Lists

Read the Nielsen Norman Group's article on select component.