Skip to main contentCarbon Design System

Dropdown

Color

Inputs come in two different colors. The default input color is $field-01 and is used on $ui-background and $ui-02 page backgrounds. The --light version input color is $field-02 and is used on $ui-01 page backgrounds.

ClassPropertySCSS
.bx--labeltext color$text-02
.bx--dropdownbackground-color$field-01
.bx--dropdownborder-bottom$ui-04
.bx--dropdown--lightbackground-color$field-02
.bx--dropdown-listbackground-color$ui-01
.bx--dropdown-texttext color$text-01
:placeholdertext color$text-03
.bx--dropdown-itembackground-color$hover-ui
.bx--dropdown-itemtext color$text-02
.bx--dropdown__arrowfill$icon-01
.bx--list-box__selection--multibackground-color$ui-05
.bx--dropdown--openbox-shadow0 2px 6px 0 rgba(0,0,0,.2)
Normal and opened dropdowns

Example of a closed and opened dropdown

Interactive states

ClassPropertySCSS
:focusborder$focus
.bx--dropdown-item:hoverbackground-color$hover-ui
.bx--dropdown-item:hovertext color$text-01
.bx--form-requirementtext color$support-01
[data-invalid]border-bottom$support-01
.bx--label:disabledtext color$disabled-02
.bx--dropdown:disabledbackground-color$disabled-01
.bx--dropdown-text:disabledtext color$disabled-02

Active: Placeholder text should remain when the user clicks into the text input and gets a cursor. Once the user starts typing, the hint text is replaced with the user input text.

Helper text: Helper text appears below the label when the input is active. Helper text remains visible while the input is focused and disappears after focus away.

Error: Error messages appear below the input field and are always present while invalid.

Disabled: Disabled state should has a .not-allowed cursor on hover.

Typography

All dropdown text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Dropdown options should not exceed three words.

ClassFont-sizeFont-weightType style
.bx--dropdown-text14 / 0.875Regular / 400$body-short-01
.bx--dropdown-link14 / 0.875Regular / 400$body-short-01
.bx--label14 / 0.875Regular / 400$label-01
.bx--form-requirement12 / 0.75Regular / 400$label-01

Structure

Dropdowns have two states, open and closed. An open and closed dropdown should be the same width and appropriately fit the design, layout, and content. The height of a closed dropdown stays consistent while the height of an open dropdown will vary based on the amount of options it has. Please note the various color differences for closed and open dropdowns.

ClassPropertypx / remSpacing tokens
.bx--labelmargin-bottom8 / 0.5$spacing-03
.bx--dropdownheight40 / 2.5–
.bx--dropdown-textpadding-left16 / 1$spacing-05
.bx--dropdown__arrowpadding-right, padding-left16 / 1$spacing-05
.bx--dropdownborder-bottom1px–
.bx--dropdown-itemheight40 / 2.5–
Structure and spacing for a closed dropdown

Structure and spacing measurements for dropdown | px / rem

Multiselect dropdown

ClassPropertypx / remSpacing tokens
.bx--list-boxheight40 / 2.5–
.bx--list-box__menu-itemheight40 / 2.5–
.bx--list-box__fieldpadding-left, padding-right16 / 1$spacing-05
.bx--checkbox-labelpadding-left16 / 1$spacing-05
.bx--list-box__menu-iconpadding-left, padding-right16 / 1$spacing-05
.bx--list-box__selection--multiheight24 / 1.5–
.bx--list-box__selection--multimargin-right16 / 1$spacing-05
Structure and spacing for a multiselect dropdown

Structure and spacing measurements for a multiselect dropdown | px / rem

Inline dropdown

ClassPropertypx / remSpacing token
.bx--list-box.bx--list-box--inlineheight32 / 2-
.bx--list-box__menu-itemheight40 / 2.5-
.bx--list-box__menu-itempadding-right, padding-left16 / 1$spacing-05
.bx--checkbox-labelpadding-left16 / 1$spacing-05
.bx--list-box__menu-iconpadding-left, padding-right16 / 1$spacing-05
Structure and spacing for inline dropdown

Structure and spacing for inline dropdown | px / rem

Inline dropdown states

Inline select has two different states; one for mouse hover and one for keyboard focus.

Hover and focus states for inline dropdown

Hover and focus states for inline dropdown

Filtering

Filtering can be used with dropdown and multiselect dropdown but not inline dropdown.

ClassPropertypx / remSpacing token
.bx--list-box__selectionheight40 / 2.5–
.bx--list-box__selection svgheight16 / 1–
.bx--list-box__menu-iconpadding-left, padding-right16 / 1$spacing-05
.bx--list-box__selectionpadding-left, padding-right16 / 1$spacing-05
.bx--list-box__selection--multiheight24 / 1.5–
Spacing for multiselect dropdown with filtering

Spacing for multiselect dropdown with filtering | px / rem

Interaction states for multiselect dropdown with filtering

Interaction states for multiselect dropdown with filtering | px / rem