Dropdown

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

Overview

Variants

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 dropdown 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>
  

Formatting

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.

Sizing

Height

Width

Placement

Do align field containers to the grid.

Do not align field input text to the grid and hang the container.

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.

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

Overflow content

Further guidance

Universal behaviors

Direction

Elevation

Scrolling behavior

Interactions

Mouse

• To select an option the user can click anywhere inside an option container.

• To clear all selected options from a list in a multiselect dropdown, click the “x” icon next to the value inside the tag.

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

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.

Screen readers

• Labels must be announced to the screen reader on focus. Ensure the helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.
• VoiceOver: Users can trigger a state change by pressing Control-Option-Space or Space while the dropdown field has screen reader focus.
• JAWS: Users can trigger a state change by pressing Space while the dropdown field has screen reader focus.
• NVDA: Users can trigger a state change by pressing Space while the dropdown field has screen reader focus.

Dropdown

• By default, the dropdown displays placeholder text in the field when closed.
• Clicking on a closed field opens a menu of options.

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

Multiselect

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.

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

Clear all

Filtering

• By default, the filterable multiselect dropdown displays placeholder text in the field when closed.
• When hovering over the field, a text cursor appears.

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

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

Combo box

• By default, the combo box displays placeholder text in the field when closed.
• When hovering over the field, a text cursor appears.

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

• Selecting an option closes the menu and the selected option replaces the placeholder text.

Modifiers

Inline

Light

Invalid

Disabled

Related

Dropdown versus Select

• 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

• 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

• Checkbox
• Form
• Radio button
• Select

Feedback