<h2>What’s new in v3</h2>
<ul>
<li><p><strong>Colors</strong></p>
<ul>
<li><strong>Error state</strong>: Input text changed to text primary color.</li>
<li><strong>Hover, border, and text</strong>: Changed from gray to slate.</li>
</ul>
</li>
<li><p><strong>Design tokens</strong>: Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</p>
</li>
</ul>
<h2>When to use</h2>
<p>A select lets users choose one option from a list. It’s useful when there are many choices or when you need to save space in the UI.</p>
<p>Use a select to:</p>
<ul>
<li>Let users pick one value from several options</li>
<li>Show a list without taking up much space</li>
<li>Offer options that may be dynamic or loaded from data</li>
<li>Collect information that is usually confirmed or submitted later (not immediate actions)</li>
</ul>
<p>Select, dropdown, and radio button are used for different user action and contexts. Choose the one that fits your experience scenario.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Select</td>
<td>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.</td>
</tr>
<tr>
<td><a href="/components/dropdown/">Dropdown</a></td>
<td>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.</td>
</tr>
<tr>
<td><a href="/components/radio-button/">Radio button</a></td>
<td>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.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The select component anatomy features the select input prompt and its parts, as well as menu of options.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/select?tab=Design#design-layout">layout</a> section. </p>
<details data-name='image-block' data-images='[{"alt":"The anatomy of a select component, labeled 1 through 3.","caption":"The select prompt contains three primary elements:\n\n1. Label: describes the input category.\n2. Select field: contains optional placeholder text, which is replaced by the selection.\n3. Helper text: informative message.","url":"https://dds.dell.com/site/v3/components/select/select-anatomy.png"},{"alt":"The select component showing a menu of options.","caption":"\nWhen a user selects the input, a list of options drops down from the field. List contain one element:\n\n1. Menu option list: styled by browser and device.","url":"https://dds.dell.com/site/v3/components/select/select-anatomy-list.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details><h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/listbox-dropdown/","type":"External"},"title":"Listboxes vs. dropdown lists","description":"Read the Nielsen Norman Group&#39;s article on the select component.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

### Errors

Error messages are displayed post-validation. Depending on how the [forms](/patterns/form/) 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 should be as concise as possible. Make it no longer than a single line and use as few words as possible.

### 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 using 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 they 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 like “All fields are required unless marked optional.” Optional fields should be written as "Label (optional)."

## Kinds

There are two kinds 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. 

<details data-name='image-block' data-images='[{"alt":"An example of a browser-styled menu for the select component.","caption":"","url":"https://dds.dell.com/site/v3/components/select/select-kinds-default.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### 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.

<details data-name='image-block' data-images='[{"alt":"A browser-styled menu for the select component, featuring a group list.","caption":"","url":"https://dds.dell.com/site/v3/components/select/select-kinds-group.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

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

<details data-name='image-block' data-images='[{"alt":" Large select component with label and value indicated.","caption":"The large select component field height is 48 pixels.","url":"https://dds.dell.com/site/v3/components/select/select-sizes-large.png"},{"alt":"Small select component with label and value indicated.","caption":"The small select component field height is 32 pixels.","url":"https://dds.dell.com/site/v3/components/select/select-sizes-small.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"","caption":"\nExample of the component with building block and slot.","url":"https://dds.dell.com/site/v3/components/select/select-slot.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behavior and states

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

<details data-name='image-block' data-images='[{"alt":"The states of select component, including rest, hover, focus, inactive, and error.","caption":"","url":"https://dds.dell.com/site/v3/components/select/select-behaviors-states.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| 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](/foundations/icons/) within the field. Additionally, red error messaging appears under the component. |

## 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.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html), [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html)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.2: [3.2.2 On Input](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html)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.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, explaining what each token controls, where it applies, and how it can be customized.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                              | Collection | CSS var                                      | Preview  |
| --------------------------------- | ---------- | -------------------------------------------- | -------- |
| spacing/xs                        | Semantic   | `var(--dds-spacing-xs)`                      | —        |
| input/gap/sm                      | Component  | `var(--dds-input-gap-sm)`                    | —        |
| file-input/file/padding-vertical  | Component  | `var(--dds-file-input-file-padding-vertical)`| —        |
| input/height/sm                   | Component  | `var(--dds-input-height-sm)`                 | —        |
| border/radius/xs                  | Semantic   | `var(--dds-border-radius-xs)`                | —        |
| border/width/xs                   | Semantic   | `var(--dds-border-width-xs)`                 | —        |
| color/background/SURFACE/neutral  | Semantic   | `var(--dds-color-background-surface-neutral)`| \#FFFFFF |
| color/border/NEUTRAL/pale         | Semantic   | `var(--dds-color-border-neutral-pale)`       | \#C5D4E3 |
| color/text/primary                | Semantic   | `var(--dds-color-text-primary)`              | \#1D2C3B |
| icon/size/xs                      | Component  | `var(--dds-icon-size-xs)`                    | —        |
| color/text/NEUTRAL/rest           | Semantic   | `var(--dds-color-text-neutral-rest)`         | \#1D2C3B |
| color/text/tertiary               | Semantic   | `var(--dds-color-text-tertiary)`             | \#5C6E7E |
| input/gap/lg                      | Component  | `var(--dds-input-gap-lg)`                    | —        |
| input/padding-horizontal/lg       | Component  | `var(--dds-input-padding-horizontal-lg)`     | —        |
| input/height/lg                   | Component  | `var(--dds-input-height-lg)`                 | —        |
| icon/size/sm                      | Component  | `var(--dds-icon-size-sm)`                    | —        |
| menu/padding                      | Component  | `var(--dds-menu-padding)`                    | —        |
| dropdown/max-height               | \-         | `var(--dds-dropdown-max-height)`             | —        |
| select/item/padding-horizontal    | Component  | `var(--dds-select-item-padding-horizontal)`  | —        |
| color/border/ERROR/base           | Semantic   | `var(--dds-color-border-error-base)`         | \#8C161F |
| color/border/BRAND/base           | Semantic   | `var(--dds-color-border-brand-base)`         | \#00468B |
| color/background/SURFACE/inactive | Semantic   | `var(--dds-color-background-surface-inactive)`| \#E1E1E1 |
| color/border/INACTIVE/base        | Semantic   | `var(--dds-color-border-inactive-base)`      | \#7E7E7E |
| color/text/inactive               | Semantic   | `var(--dds-color-text-inactive)`             | \#B6B6B6 |
| helper-text/gap                   | Component  | `var(--dds-helper-text-gap)`                 | —        |
| helper-text/icon/height           | Internal   | `var(--dds-helper-text-icon-height)`         | —        |
| color/text/ERROR/rest             | Semantic   | `var(--dds-color-text-error-rest)`           | \#BB2A33 |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-select--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-select--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-select--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-select--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-select--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-select--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

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.