<h2>When to use</h2>
<p>Dropdown, select, and action menu components have similarities but are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Dropdown</td>
<td>Use the dropdown component to filter, sort, or change page content. Unlike the select component, dropdown can be styled to match the look and feel of a product or application. Dropdowns use multiple concurrent selections, filtering, and grouping to accommodate long lists.</td>
</tr>
<tr>
<td><a href="/components/select/">Select</a></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, select has no filtering capabilities or features that dropdown presents. Also, the appearance of the select component will be determined by browser and device settings. Consider using select if your product or application is prioritizing mobile experiences.</td>
</tr>
<tr>
<td><a href="/components/action-menu/">Action menu</a></td>
<td>Use action menu if you have limited space and need to display overflow actions in a list, such as copy, paste, or cut. A selection should trigger the action immediately, and can include both single-select and multi-select options.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The dropdown component is composed of two main parts: a prompt and a menu option list. The component is customizable so that it can accommodate multiple design objectives. Customizations can affect the dropdown’s anatomy and appearance depending on its intended use. The following examples show both behaviors of a single-select dropdown with a simple list and all possible elements.</p>
<details data-name='image-block' data-images='[{"alt":"A dropdown field shown with its parts labeled 1 through 4.","caption":"The dropdown prompt consists of four primary elements:\n\n1. Label: describes the options the user will see.\n2. Dropdown field: an empty field that indicates a user needs to select an option from the list. This field can be modified to include a prompt so that the user can type in it.\n3. Helper text (optional): message to help or guide the user.\n4. Chevron: visual indication that the list can open or close.","url":"https://dds.dell.com/site/stage/81/1d/Dropdown_Anatomy_Prompt_216528e504.png"},{"alt":"An open dropdown menu, with the parts of its menu option list labeled 1 through 3.","caption":"When the user expands the dropdown, the following options are visible:\n\n1. Menu option list: shows a user their options. This part is customizable as a simple, grouped, or multi-select list.\n2. Scroll bar: used only when the quantity of items in the menu option list exceeds the height of the viewport.\n3. Check icon: visual representation of one selected option.","url":"https://dds.dell.com/site/stage/3f/f7/Dropdown_Anatomy_List_67263bb1c1.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/drop-down-menus/","type":"External"},"title":"Dropdowns: Design Guidelines","description":"Read the Nielsen Norman Group&#39;s article on dropdown.","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

A dropdown is commonly used for situations that requires a list of options to the user. The component works as an input with a menu and allows the user to select one or more options, depending on the kind of list used. Dropdowns has extra capabilities and are more customizable than select component, using multiple concurrent selections, filtering, and grouping options to accommodate long lists.

Use the single-select dropdown when the user must select only one value from a list, such as in a form in order to collect user’s country or region. The selected option will appear in the field.

<details data-name='image-block' data-images='[{"alt":"A dropdown with label, shows United States selected from a list of countries once the menu is opened.","caption":"","url":"https://dds.dell.com/site/production/9b/83/Dropdown_Usage1_8073c6f7ea.png"}]' data-numberofcolumns='1'></details>

The multi-select dropdown allows users to select more than one value from a list. It can be used to filter more than one location at a time. The number (quantity) of selected options appears as a tag in the field, and the component’s list contains checkboxes to visually indicate if a option is selected or not.

<details data-name='image-block' data-images='[{"alt":"A dropdown with label, selected shows, United Kingdom and United States selected from a list of countries once the menu is opened.","caption":"","url":"https://dds.dell.com/site/production/24/a4/Dropdown_Usage_Multiselect_79fbff14d8.png"}]' data-numberofcolumns='1'></details>

## Kinds

The dropdown menu can accommodate four kinds of lists: simple lists, grouped lists, multi-select lists, and grouped multi-select lists. Each of these kinds is used in its appropriate context and scenario, chosen based on the content of the dropdown.

<details data-name='image-block' data-images='[{"alt":"A dropdown with its menu expanded, showing four placeholder options.","caption":"Simple lists: A dropdown with a simple list is a menu with a set of options. Users can only select one single option from the list.","url":"https://dds.dell.com/site/production/e1/e7/Dropdown_Kinds1_433364f3ca.png"},{"alt":"A dropdown with its menu expanded, showing two groups with two placeholder options each.","caption":"Grouped lists: Options can be grouped by category. Grouped lists can function either as simple or as multi-select lists. Note that the grouping titles cannot be selected.","url":"https://dds.dell.com/site/production/60/92/Dropdown_Kinds2_c085114ba9.png"},{"alt":"A dropdown with its menu expanded, showing a list of selectable items. ","caption":"Multi-select lists: This kind always includes checkboxes to indicate the user can select and any number of options. Add a “Select all” checkbox to select or deselect all options in the list.","url":"https://dds.dell.com/site/production/99/80/Dropdown_Kinds3_5cda8c92f1.png"},{"alt":"A dropdown with its menu expanded, showing two groups of selectable items. ","caption":"Grouped multi-select lists: Options are grouped by category and the checkboxes indicates the user can select any number of options. The “Select all” checkbox allows a user to select or deselect all options within every group.","url":"https://dds.dell.com/site/production/ed/e7/Dropdown_Kinds4_8ba6b3be09.png"}]' data-numberofcolumns='2'></details>

### Sizes

You can use the dropdown component in two sizes: small or large. Make sure to match the size of the component to the size of the grid and to keep them consistent throughout the experience. Note that sizes differentiate in their input heights, not width. Width of the component should be determined by the selection length, making the multi-select kinds, for example, wider.

<details data-name='image-block' data-images='[{"alt":"Example of a small size dropdown","caption":"Use **small size** dropdowns for simple lists that display fewer elements, or in experiences with limited screen space, as this size has slightly compact space in its input.","url":"https://dds.dell.com/site/production/3c/0a/Dropdown_Size_Small_06f4597bf2.png"},{"alt":"Example of a large size dropdown","caption":"Use **large size** dropdowns for long, grouped, and complex lists, as it provides additional space for the elements in the input. Also, this size enhances visibility for the user.","url":"https://dds.dell.com/site/production/09/69/Dropdown_Size_Large_9fc8e73a62.png"}]' data-numberofcolumns='2'></details>

## Interaction

### Behaviors and states

Dropdowns are impacted by user interaction and will visually reflect their status. They can communicate six states: rest, hover, press, inactive, focus, and error. The states of the component are reflected in its color and opacity.

<details data-name='image-block' data-images='[{"alt":"Visual example of the four states of a dropdown: rest, hover, inactive, and press/focus.","caption":"","url":"https://dds.dell.com/site/production/b2/6d/Dropdown_Behavior_States_16b62b69bb.png"}]' data-numberofcolumns='1'></details>

| State       | Behavior                                                                                                                                                                                              |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rest        | The rest state is the starting or ending state, indicating the text input is empty or filled with the selection.                                                                                      |
| Hover       | When a user hovers their cursor over the dropdown’s active area, the input changes color, indicating that it is able to be pressed.                                                                   |
| Inactive    | Inactive dropdowns are displayed with 40% opacity, indicating the component exists but is not available to the user interaction. Is this state is enabled, the dropdown cannot be marked as required. |
| Press\Focus | A blue outline appears around the dropdown when a user tabs or uses keyboard controls to navigate selections.                                                                                         |

### Filtering

You can enable filtering on any of the dropdown lists. When filtering is enabled, the dropdown field functions as a text input in which the user can type in. The results are alphabetized and reflect any of the letters that appear in the word. If none of the results reflect what the user typed, a “No options found” message will appear in the dropdown list.

<details data-name='image-block' data-images='[{"alt":"Dropdown with filtering","caption":"","url":"https://dds.dell.com/site/stage/f6/08/Dropdown_Usage_Filter_1a27edfdbf.png"}]' data-numberofcolumns='1'></details>

### Multi-select

A multi-select list containing larger lists of options must contain a “Select all” checkbox. The “Select all” checkbox is not visible while a filter term is being entered into the filtering text field. If the user selects “Select all”, it will mark all options from the list as selected. If the user deselect it, no options will be selected.

<details data-name='image-block' data-images='[{"alt":"Dropdown with multi-select option","caption":"","url":"https://dds.dell.com/site/production/41/dd/Select_all_dropdown_component_4f303e4133.png"}]' data-numberofcolumns='1'></details>

## Standards

### Accessibility

**Labels should be clear, concise, and purposeful**\
The purpose of the dropdown should be clear for all users from the label and group titles. They should provide clear guidance in a succinct way.\
WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)\
<br></br>
**Use short, unique names for all options within a dropdown**\
Make sure that no two options begin with the same word or phrase, which can be confusing when scanning or listening to via a screen reader. In grouped dropdowns, group titles should also differ from list options.\
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)\
<br></br>
**If a selection will cause a change in context for the user, make sure to communicate it in advance**\
If selecting a dropdown 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, advance warning should be given so those changes are predictable to users.\
WCAG 2.2: [3.2.2 On Input](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html)\
<br></br>
**Accessible keyboard interaction**\
Just like any other interactive component, dropdown should provide an accessible keyboard navigation.\
W3C Authoring Practices Guide (APG): [Combobox (Dropdown) Pattern & Keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)

### Content

**Clear and concise labels**\
Every dropdown should have a label to identify and describe its purpose, providing guidance and assuring readability and accessibility. Label text should be left-aligned (or right-aligned for right-to-left languages) with the input. Write label text in sentence case and be clear, being as succinct as possible.\
**Do**: Country\
**Don’t**: Select Your Country\
<br></br>
**Helper text**\
Helper text is an instructional text that helps the user fill out the relevant field. It usually guides the user to enter data in the appropriate format, providing field explanation, localization assistance, and help prevent errors. Keep the content concise, with as few words as possible to guide users and help them prevent errors. Helper text appears below the text field.\
Example: Select your current country\
<br></br>
**Group titles**\
If possible, use one-word titles for groups of similar items within the dropdown.\
**Do**: Layout\
**Don’t**: Layout controls

Design

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

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-dropdown--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-dropdown--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-dropdown--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-dropdown--basic)

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

Dropdowns present users with a list or menu of options. Users can filter these options and select multiple options concurrently.