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	PublishedElement can be used in production
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 prompt contains three primary elements:

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

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

Menu option list: styled by browser and device.

Articles

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

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.

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.

The large select component field height is 48 pixels.

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.

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

Accessibility

Use short, unique, and descriptive labels for all options within a select list
Avoid options starting with the same word or phrase, which can be confusing when scanning or listening to via a screen reader.
WCAG 2.1: 1.3.1 Info and Relationships, 3.3.2 Labels or Instructions

Communicate content or state changes prior to the user’s submission
If selecting an option will cause a change of context, such as rearranging page content, opening a new window, or jumping the user’s focus to another component, warn users in advance.
WCAG 2.1: 3.2.2 On Input

Provide clear direction in the label text
Select’s expanded menu will cover existing helper and error text under the field, so make sure the label provides enough guidance to avoid errors.

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.

View the select demo and code in Angular.

Select

Status

Contents

What's new

When to use

Anatomy

Articles

Listboxes vs. Dropdown Lists

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

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Angular

Contents

Select

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

ArticlesCopy link to this section

Listboxes vs. Dropdown Lists

Contents

Vanilla

Angular

What's new

When to use

Anatomy

Articles