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

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In progressElement design and development in progress
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.

Component	Use cases
Select	Use 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.
Dropdown	Use 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 button	Use 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 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.

Menu option list: styled by browser and device.

Usage

Errors

Error messages are displayed post validation. Depending on how the forms are built, this may take place instantly or after the user manually submits the entire form. Error messages can wrap to a second line, but they should be as concise as possible and ideally shorter than a single line. This will reduce confusion and ensure the best experience for the user. Additionally, if the field is displaying helper text, the error message would replace it.

Helper text

The select component includes optional helper text to guide or instruct the user in choosing the appropriate value from the list. Helper text appears below the select field. If necessary, helper text can line-wrap but it should be as concise as possible. Make it no longer than a single line. Use as few words as possible to guide users and help them avoid errors.

Labels

Labels must be clear, concise, unique, and accurately describe the selections. Every select component must contain a label. Text should be left-aligned (or right-aligned for right-to-left languages) with the input.

List order

The values within a select list should be sorted in a logical order that is easily scannable.

Placeholder text

Placeholder text is optional and should be used in combination with helper text. Using only placeholder text introduces accessibility concerns because the text is not read by screen readers. Placeholder text is designed to disappear when the user interacts with the component, which makes it difficult for people to remember the information.

If implementing placeholder text, it should be a default selected value (usually the first item in the list) or instructional text, such as “Select one” to prompt users to interact with the component and make a selection. When writing placeholder text in combination with helper text, consider the ways in which these pieces of content can complement each other. For example, helper text can provide the user with instructions while placeholder text can give a preview of the format for the requested information.

Required fields

To reduce confusion and visual noise, limit optional select entries and display only those which are required. Instruct users with introductory form text that says: “All fields are required unless marked optional.” Optional fields should be written as: Label (optional).

Kinds

Options

There are two variants for select lists. Neither variant can be customized since the styling is controlled by the browser.

Default list

This is the simplest type of select control: a menu with a list of options. Keep in mind, this is just an example—the visual display will depend on the user’s browser and device.

An example of a browser-styled menu for the select component.

Group list

This list can be separated into categorized groups, each with a label. The group label itself is not selectable and sometimes rendered as an inactive item, while the options under the label display hierarchically.

Sizes

The select component comes in two sizes: small and large. Match the size of the component to the size of the grid, and make sure to keep sizes consistent throughout the experience.

Large select component with label and value indicated. — The large select component field height is 48 pixels.

Small select component with label and value indicated. — The small select component field height is 32 pixels.

Interaction

Behavior and states

The select prompt exhibits the described states and behavior before and during user interaction.

The states of select component, including rest, hover, focus, inactive, and error.

State	Behavior
Rest	The rest state is the starting or ending state, indicating the text area is empty or filled.
Hover	When a user hovers over a selection, a highlight appears, indicating the field is selectable.
Focus	A blue outline appears around the text area when a user tabs or uses keyboard controls to navigate selections.
Inactive	Inactive text areas should be used rarely and are displayed with 40% opacity, indicating the field exists but is not available to the user.
Error	A validation error appears in red text (Red 700) and displays an error icon within the field. Additionally, red error messaging appears under the component.

Color

Light mode

Color	Use cases	Hex
Gray 700	Label text, helper text, and inactive state border	#6E6E6E
Blue 600	Hover state	#0672CB
Blue 800	Focus state border	#00468B
Red 700	Error state	#BB2A33

Standards

Content

Capitalization and case
Label and error text should be in sentence case.

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<div class="dds__select" data-dds="select">
  <label id="select-label-525120996" for="select-control-525120996" class="dds__label">Select label</label>
  <div class="dds__select__wrapper">
    <select id="select-control-525120996" class="dds__select__field" aria-describedby="select-helper-525120996">
      <option value="APEX">APEX</option>
      <option value="Multi Cloud">Multi Cloud</option>
      <option value="Cloud Solutions">Cloud Solutions</option>
      <option value="Energy">Energy</option>
    </select>
    <small id="select-helper-525120996" class="dds__select__helper">Helper text</small>
    <div id="select-error-525120996" class="dds__invalid-feedback">Error Message</div>
  </div>
</div>

Copy code

View the select demo and code in Vanilla.

Visit Storybook

Select

Status

Contents

What's new

When to use

Anatomy

Contents

Contents

Usage

Errors

Helper text

Labels

List order

Placeholder text

Required fields

Kinds

Options

Default list

Group list

Sizes

Interaction

Behavior and states

Color

Light mode

Standards

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Select

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

Contents

What's new

When to use

Anatomy