Carbon Design System

Dropdowns present a list of options from which a user can select one option, or several. A selected option can represent a value in a form, or can be used as an action to filter or sort existing content.

Overview
Live demo
Formatting
Content
Universal behaviors
Dropdown
Multiselect
Combo box
Modifiers
Related
References
Feedback

Overview

There are three different variants of dropdowns that support various kinds of functionality—dropdown, multiselect, and combo box.

Variants

Variant	Purpose
Dropdown	Allows the user to select one option from a list.
Multiselect	Allows the user to select multiple options from a list and filter.
Combo box	Allows the user to make a selection from a list of suggested, likely, or desired values.

When to use

Dropdowns can be used in forms on full pages, in modals, or on side panels. The dropdown component is used to filter or sort contents on a page. It is a stylized version of the select component, and can be styled as needed.

When not to use

It is best practice not to use a dropdown if there are two options to choose from. In this case, use a radio button group instead.
Do not nest dropdowns or use them to display overly complex information. Keep option selections as straight forward as possible.
Consider using a select if most of your experience is form-based or frequently used on mobile platforms. The native select works more easily with a native form when submitting data and is also easier to use on a mobile platform

Live demo

Theme selector

Variant selector

CodeSandbox React Angular Vue Web Components

Live editor for the Default component


      <div style={{width: '300px', height: '100px'}}>
        <Dropdown
          ariaLabel="Dropdown"
          id="carbon-dropdown-example"
          items={items}
          label="Dropdown menu options"
          titleText="Dropdown title"
        />
      </div>

Formatting

Anatomy

Dropdowns are composed of four distinct sections—assistive text like labels or helper text, a field, a menu, and options contained within the menu. Labels and helper text can guide the user to make an informed decision when making a selection.

Labels: Text that informs the user what to expect in the list of dropdown options.
Helper text: Assistive text to help the user choose the right selection.
Field: Persists when the dropdown is open or closed.
Option: A choice for the user, shown with other choices in a menu.
Menu: A list of options to choose from, displayed as an open state. from.

Styling

There are two styles of dropdown inputs, default and fluid. They share the same functionality but look visually different, influencing where to use them.

Style	Appearance	Use case
Default	A traditional style where the label is positioned outside and above the input field.	Use when white space is needed between input components or in productive moments where space is at a premium, and smaller components are needed.
Fluid	An alternative style where the label is placed inside of the input field and is stacked inline with the user input text.	Use in expressive moments, fluid forms, contained spaces, or attached to complex components, like a toolbar.

A default style input is shown on the left and fluid style is on the right.

Dropdown