Skip to main contentCarbon Design System

Dropdown

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

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

Variants

VariantPurpose
DropdownAllows the user to select one option from a list.
MultiselectAllows the user to select multiple options from a list and filter.
Combo boxAllows 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

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

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.

Default style dropdown anatomy
  1. Labels: Text that informs the user what to expect in the list of dropdown options.
  2. Helper text: Assistive text to help the user choose the right selection.
  3. Field: Persists when the dropdown is open or closed.
  4. Option: A choice for the user, shown with other choices in a menu.
  5. 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.

StyleAppearanceUse case
DefaultA 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.
FluidAn 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.
Default and fluid dropdown styles

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

Sizing