<h2>When to use</h2>
<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>
<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/stage/f6/f1/Select_Anatomy_0b9b8cbc61.png"},{"alt":"The select component showing a menu of options.","caption":"When a user selects the input, a list of options drops down from the field.\n\n1. Menu option list: styled by browser and device.","url":"https://dds.dell.com/site/stage/a9/3c/Select_Anatomy_List_07a10e7170.png"}]' data-numberofcolumns='2'></details>

<h2>Articles</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'></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 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

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. Keep in mind, this is just an example—the visual display will depend on the user’s browser and device.

<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/stage/29/b5/Select_List_Default_c7d6c9de95.png"}]' data-numberofcolumns='1'></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/stage/af/f9/Select_List_Group_066a7f67ef.png"}]' data-numberofcolumns='1'></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/stage/f4/95/Select_Sizes_Large_1486ba2742.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/stage/c5/ac/Select_Sizes_Small_8bb5eb5841.png"}]' data-numberofcolumns='2'></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/production/65/f0/Select_Behaviors_States_c615154a1d.png"}]' data-numberofcolumns='1'></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)\
\
**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)\
\
**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



To see other interactive examples of this component or for additional developer documentation, visit [Storybook](<Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-select--basic>).

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-select--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-select--basic).

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-select--basic&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-select--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-select--docs&viewMode=docs&websiteFrame=true'></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.