Dropdown

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

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
React	In backlogElement is in backlog
Documentation	In progressElement design and development in progress

What's new

Dropdown is a new component for the Dell Design System v2. It incorporates the updated font ramp and color palette, in addition to accessibility enhancements.

When to use

Component	Use case
Dropdown	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.
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. Consider using select if your product or application is prioritizing mobile experiences.
Action menu	Use action menu if you have limited space and need to display overflow actions in a list. A selection should trigger the action immediately, and can include both single-select and multi-select options.

Anatomy

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 example shows both parts of a single-select dropdown with a simple list and all possible elements.

The dropdown prompt consists of four primary elements:

Label: describes the options the user will see
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
Helper text (optional): message to help or guide the user
Chevron: visual indication that the list can open or close

When the user expands the dropdown, the options are visible:

Menu option list: shows a user their options. This part is customizable as a simple, grouped, or multi-select list
Scrollbar: used only when the quantity of items in the menu option list exceeds the height of the viewport
Check icon: visual representation of one selected option

Articles

Read the Nielsen Norman Group's article on dropdown.

Usage

Single-select

Use the single-select dropdown when selecting one value from a list. The selected option then appears in the field.

Multi-select

The multi-select dropdown allows the user to select more than one value from a list. The number (quantity) of selected options appears as a tag in the field.

Use a “Select all” checkbox with a multi-select list containing larger lists of options. The “Select all” checkbox is not visible while a filter term is being entered into the filtering text field.

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

Kinds

The menu of the dropdown can accommodate three kinds of lists.

Simple list

A dropdown with a simple list is a menu with a set of options.

Grouped list

A dropdown with a grouped list allows options to be grouped by category. Grouped lists can function either as simple or as multi-select lists. Note that the grouping titles cannot be selected.

Multi-select list

A dropdown with a multi-select list includes checkboxes to indicate that the user can select any number of options. Add a “Select all” checkbox to select or deselect all options in the list.

Grouped multi-select list

A dropdown with options grouped by category and checkboxes to indicate that the user can select any number of options. A “Select all” checkbox allows a user to select all options in every group. Deselecting the “Select all” checkbox clears all selections in all groups.

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__dropdown" data-dds="dropdown" id="simple-list-dropdown" data-selection="single" data-select-all-label="Select all">
  <div class="dds__dropdown__input-container">
    <label id="simple-list-dropdown-label" for="simple-list-dropdown-input">Label</label>
    <div
      class="dds__dropdown__input-wrapper"
      autocomplete="off"
      role="combobox"
      aria-haspopup="listbox"
      aria-controls="simple-list-dropdown-popup"
      aria-expanded="false"
    >
      <input
        id="simple-list-dropdown-input"
        name="simple-list-dropdown-name"
        type="text"
        class="dds__dropdown__input-field"
        aria-labelledby="simple-list-dropdown-label simple-list-dropdown-helper"
        autocomplete="off"
        aria-expanded="false"
        aria-controls="simple-list-dropdown-list"
      />

      <i class="dds__icon dds__icon--alert-notice dds__dropdown__feedback__icon" aria-hidden="true"></i>
      <small id="simple-list-dropdown-helper" class="dds__input-text__helper">Helper text</small>
      <div id="simple-list-dropdown-feedback" class="dds__invalid-feedback">Invalid Feedback Message</div>
    </div>
  </div>
  <div id="simple-list-dropdown-popup" class="dds__dropdown__popup dds__dropdown__popup--hidden" role="presentation" tabindex="-1">
    <ul class="dds__dropdown__list" role="listbox" tabindex="-1" id="simple-list-dropdown-list">
      <li class="dds__dropdown__item" role="none">
        <button type="button" class="dds__dropdown__item-option" role="option" data-selected="false" data-value="1" tabindex="-1">
          <span class="dds__dropdown__item-label">List option 1</span>
        </button>
      </li>
      <li class="dds__dropdown__item" role="none">
        <button type="button" class="dds__dropdown__item-option" role="option" data-selected="false" data-value="2" tabindex="-1">
          <span class="dds__dropdown__item-label">List option 2</span>
        </button>
      </li>
      <li class="dds__dropdown__item" role="none">
        <button type="button" class="dds__dropdown__item-option" role="option" data-selected="false" data-value="3" tabindex="-1">
          <span class="dds__dropdown__item-label">List option 3</span>
        </button>
      </li>
      <li class="dds__dropdown__item" role="none">
        <button type="button" class="dds__dropdown__item-option" role="option" data-selected="false" data-value="4" tabindex="-1">
          <span class="dds__dropdown__item-label">List option 4</span>
        </button>
      </li>
    </ul>
  </div>
</div>

Copy code

View the dropdown demo and code in Vanilla.

Dropdown

Status

Contents

What's new

When to use

Anatomy

Articles

Dropdowns: Design Guidelines

Contents

Contents

Usage

Single-select

Multi-select

With filtering

Kinds

Simple list

Grouped list

Multi-select list

Grouped multi-select list

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Dropdown

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

Dropdowns: Design Guidelines

Contents

Vanilla

What's new

When to use

Anatomy

Articles