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.

Live demo



      This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.

      Accessibility testing status

      For every latest release, Carbon runs tests on all components to meet the accessibility requirements. These different statuses report the work that Carbon has done in the back end. These tests appear only when the components are stable.


        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

        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

        Default input heights

        There are three Default dropdown height sizes: small, medium, and large. Supporting three different dropdown sizes gives you more flexibility when structuring layouts. However, use a consistent size for all form components on the same page. For example, if you are using a medium size dropdown also use the same size text inputs, buttons, and so on. When in doubt, use the default medium size height.

        Default sizeHeight (px/rem)Use case
        Small (sm)32 / 2Use when space is constricted or when placing a dropdown in a form that is long and complex.
        Medium (md)40 / 2.5This is the default size and the most commonly used size. When in doubt, use the medium size.
        Large (lg)48 / 3Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a dropdown is placed by itself on a page, for example as a filter.
        Dropdown sizes in the defauult style

        When the menu is open, each option in the menu should be the same height as the field.

        Dropdown field and option size relationship

        Fluid inputs heights

        In the fluid dropdown, there is only one input height but there are two menu item sizes–default and condensed.

        Fluid sizeHeight (px/rem)Use case
        Default64 / 4Use when there are fewer menu options in expressive moments.
        Condensed40 / 2.5Use when there are many menu options so more can be viewed at once without scrolling.
        Dropdown sizes in the fluid style

        Width

        There is no minimum or maximum width for a dropdown. The width can be customized appropriately for its context.

        Placement

        Field containers should vertically align with other form components on a page. Whether it aligns flush to grid columns or hangs in the gutters depends on the style of dropdown you are using.

        Do align default style input dropdowns to the grid so the input label aligns with other type on the page.

        Do align default style dropdown containers flush to the grid so the input label aligns with other type on the page.

        Don't hang default style dropdowns into the grid gutters.

        Don't hang default style dropdowns into the grid gutters.

        Do place fluid components flush to on another with no spacing between them.

        Do place fluid components flush to on another with no spacing between them.

        Do not use fluid components with vertical or horizontal spacing between them.

        Do not use fluid components with vertical or horizontal spacing between them.

        Content

        Main elements

        Labels

        • Labels inform users what to expect in the list of dropdown options.
        • Keep the label short and concise by limiting it to a single line of text.

        Helper text

        • Helper text is pertinent information that assists the user in choosing the right selection from the dropdown menu.
        • Helper text is always available when the dropdown field is focused and appears underneath the label.
        • Use sentence-style capitalization and write the text as full sentences with punctuation, unless space is limited.
        Dropdown assistive labels, helper text or none.

        Field placeholder text

        • Placeholder text is presented in the field by default if no selection has been made from the dropdown. This is important to have in case the dropdown does not have a label above it.
        • Use clear placeholder text for the dropdown trigger so that users understand the purpose.

        Options in a menu

        • Describe the dropdown option succinctly in one line of text.
        • Never use decorative images or icons within a dropdown.
        • We recommend presenting the options in alphabetical order.

        Optional versus required fields

        All fields in a form are assumed required, and optional fields are tagged. For more information, see the form component usage guidance.

        Overflow content

        Avoid having multiple lines of text in a dropdown. If the text is too long for one line, add an ellipsis (…) for overflow content, and accompany with a browser-based tooltip to show the full string of text.

        Dropdown overflow text truncation.

        Further guidance

        For further content guidance, see Carbon’s content guidelines.

        Universal behaviors

        The behaviors listed in this section are universal across all of the variants. For behaviors that are unique to each variant, see the sections below.

        Direction

        A dropdown can open up or down depending on its position on the screen. For example, if the dropdown appears at the bottom and close to the edge of the interface, the menu expands upward to avoid being cropped. By default, our dropdowns open downward.

        Elevation

        The dropdown menu has a style called box-shadow that is placed behind the menu when open to give the menu a perceived higher elevation than the content that may fall behind it. Box-shadow is also used in other components that have overlayed menus, such as the overflow menu and date picker calendar. The SCSS for box-shadow is 0 2px 6px 0 rgba(0,0,0,.2).

        Scrolling behavior

        Scroll bars may not always be enabled so we recommend showing 50% of the last option’s container height to indicate there is more to see within the menu. We recommend starting a scroll at the sixth option in the menu list, but this may vary based on your specific use case.

        Dropdown scrolling menu option cutoff.

        States

        Dropdowns, combo boxes, and multiselects have a series of states for both their fields and menus: enabled, hover, focus, error, warning, disabled, skeleton, and read-only. For more information on states, visit the interactive states guidance on the style tab.

        Vertical dividers in input fields

        Vertical dividers act as a visual separator between interactive elements in an input field. These vertical dividers are only present between two interactive elements, they should not be introduced between non-interactive elements like error states, other non-interactive icons, or buttons.

        A divider will also be present to the left of the leftmost interactive item set, even if it’s next to a non-interactive item.

        Do introduce a vertical divider between two interactive elements in an input field.

        Do introduce a vertical divider between two interactive elements in an input field.

        Do not introduce a vertical divider between interactive and non-interactive elements in an input field.

        Do not introduce a vertical divider between interactive and non-interactive elements in an input field.

        Do introduce a vertical divider to the left of the leftmost interactive set in an input field.

        Do introduce a vertical divider to the left of the leftmost interactive set in an input field.

        Do not use vertical dividers inconsistently in the same icon set, where some icons have vertical dividers and some do not.

        Do not use vertical dividers inconsistently in the same icon set, where some icons have vertical dividers and some do not.

        Interactions

        Mouse

        Users trigger a dropdown menu to open by clicking the chevron icon or clicking anywhere within the field. Users can close the menu by clicking the chevron icon or clicking outside of the menu.

        Default dropdown closed and open state click targets.
        • To select an option the user can click anywhere inside an option container.
        Default dropdown menu option click target.
        • To clear all selected options from a list in a multiselect dropdown, click the “x” icon next to the value inside the tag.
        Multiselect dropdown tag clear click target.
        • To clear a selected value in a combo box or a filterable dropdown, click the “x” icon to the right of the field input text.
        Combo box and filterable dropdown clear click target.

        Keyboard

        Dropdown:

        • The dropdown field is the element that receives focus. All keyboard interactions happen from this element.
        • Users can move the highlighted option to the next option by pressing the Down arrow.
        • Users can move the highlighted option to the previous option by pressing the Up arrow.
        • Users can open the dropdown menu by pressing Space, Enter, Down arrow or the Up arrow.
        • Users can close the dropdown menu by pressing Escape, Space, or Enter.

        Combo box:

        • When typing a character, focus stays on the field while an option in the menu is highlighted that best matches the typed character.
        • When typing multiple characters in rapid succession, focus stays on the field while an option in the menu is highlighted that best matches the string of characters typed.

        Multiple selection:

        • The multiselect field receives focus if none of the options are selected in the menu.
        • Once an option in the dropdown menu receives focus, users can press Enter to select or deselect the option.
        • Users can open and close a dropdown menu by pressing Space.

        Use when you can select only one option from a list at a time.

        • By default, the dropdown displays placeholder text in the field when closed.
        • Clicking on a closed field opens a menu of options.
        Default dropdown closed and open state.
        • Selecting an option from the menu closes it and the selected option text replaces the placeholder text in the field and also remains as an option in place if the menu is open.
        Dropdown selected state.

        Multiselect

        Use when you can select multiple options from a list or to filter information.

        Making a selection

        • By default, the dropdown displays placeholder text in the field when closed.
        • Clicking a closed field opens a menu of options. Each option contains a checkbox input to the left of the option text.
        • The menu stays open while options are being selected. The menu closes by clicking the field or outside of the dropdown.
        Default multiselect dropdown closed and open states.
        • Once options have been selected from the menu, a tag appears to the left of the text in the field containing the total number of selected options. The placeholder text can change to text that better reflects what is selected.
        • Selected options shift to the top of the menu in alphanumeric order.
        • Unlike dropdown and combo box, the menu does not close once the user makes selections. Because multiple selections are possible, the user needs to click outside of the dropdown or on the parent element to close the menu.
        Default multiselect dropdown selected state.

        Clear all

        To clear all selected options from a list, hover over the filterable tag and click the “x” (or close) icon next to the value. To help with clarity, a browser tooltip appears when the user hovers over the “x” icon to indicate the click action results. If you want to unselect individual options, you can do so by unselecting the checkbox of each option.

        Multiselect dropdown clear tag interaction.

        Filtering

        Use filtering to narrow down a long list of options to find the option you want to select.

        • By default, the filterable multiselect dropdown displays placeholder text in the field when closed.
        • When hovering over the field, a text cursor appears.
        Default filterable dropdown closed and open state.
        • The menu opens by clicking anywhere in the field and you can start typing to filter the list of options. The options that start to match your entry remain in the list while other existing options are temporarily removed.
        • After typing text in the field, the close (x) icon appears to the right of the text in the field. This clears any text that’s been entered in the field.
        Filterable dropdown typing and filtering open menu.
        • Once options have been selected from the menu, a tag appears to the left of the text in the field containing the total number of selected options. The placeholder text can change to text that better reflects what is selected.
        • Selected options shift to the top of the menu in alphanumeric order.
        • Like the default multiselect dropdown, the menu does not close once the user makes selections.
        Default filterable dropdown selected state.

        Combo box

        Allows the the user to make a selection from a predefined list of options and is typically used when there are a large amount of options to choose from.

        • By default, the combo box displays placeholder text in the field when closed.
        • When hovering over the field, a text cursor appears.
        Combo box closed enabled and hover states.
        • The menu opens by clicking anywhere in the field and you can start typing to sort through the list of options. The option that best matches the typed characters is highlighted.
        • After typing text in the field, the close (x) icon appears to the right of the text in the field. This clears any text that’s been entered in the field.
        Combo box typing and option hover jumping to matched entry in the menu.
        • Selecting an option closes the menu and the selected option replaces the placeholder text.
        Default combo box selected state.

        Modifiers

        Inline

        When placing a dropdown inline with other content use the inline modifier. If adding a visual label to an inline dropdown it should appear inline to the left of the dropdown. If there is no visual label present you must supply an appropriate accessibility label to the inline dropdown. Note: Inline is only a modifier for dropdown and does not have filtering functionality.

        Inline dropdown with label in a dashboard.

        Dropdown versus Select

        Dropdown and select components have functionality and style differences.

        • The underlying code of a dropdown component is styled to match the design system, while the select component’s appearance is determined by the browser being used.
        • Use a dropdown component in forms, to select multiple options at a time and to filter or sort content on a page. The select dropdown does not have filtering or multiselect functionality.
        • Use a select dropdown component if most of your experience is form based. Custom dropdowns can be used in these situations, but the native select works more easily with a native form when submitting data.
        • Use a select dropdown component if your experience will be frequently used on mobile. The native select dropdown uses the native control for the platform which makes it easier to use.

        Dropdown versus Combo box

        While the dropdown and combo box look similar they have different functions.

        • With a dropdown list, the selected option is always visible, and the other options are visible by clicking and opening the list.
        • A combo box is a combination of a standard list box or a dropdown list that lets users type inside the input field to find an option that matches their inputted value.

        References

        Angie Li, Dropdown: Design Guidelines (Nielsen Norman Group, 2017)

        Feedback

        Help us improve this pattern by providing feedback, asking questions, and leaving any other comments on GitHub.