components icon

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
Documentation
PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
ExperimentalElement offered for testing and feedback. Not intended for use in production.
React
React
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog

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 anatomy of a select component, labeled 1 through 3.

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.
The select component in its dropdown state, showing a menu of options.

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

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