Dropdowns are interactive controls that display a list of selectable options.
The dropdown component consists of an input component and menu component. As such, it inherits much of their base functionality with a few additional opinions specific to the dropdown.
- Left icon
- Input text
- Dropdown icon
- Activation indicator
- Required indicator
- Helper text
Use the outline appearance when the dropdown will be used among several other inputs such as detailed form layouts to reduce visual busyness.
Filled dropdowns can be used to provide additional visual emphasis.
Be careful when using the fill appearance; consider using them when only a few are being used and the dropdown needs to stand out from surrounding content.
A user-customizable icon can be included to describe the type of dropdown, such as a date picker. Note that the right icon is permanently set and cannot be customized.
Compact dropdowns have a reduced height and are best used in forms with a high number of form elements or in contexts that require more conservative vertical spacing.
Note that only the dropdown container height is reduced; the menu items retain their original size.
Every dropdown should have a label. Keep labels concise and clear and do not wrap to multiple lines.
Floating labels are used in place of placeholder text. They start in the middle of the dropdown (in the position of placeholder text) and transition to the top when the dropdown is selected. If the dropdown content is cleared, the label returns to the placeholder position.
Fixed labels are always present at the top of the dropdown. Placeholder text can also be included to provide additional guidance on what can be selected from the dropdown menu.
Labels are not required if an adjacent label is included that adequately describes the purpose of the dropdown and is correctly referenced to the field for accessibility purposes. Placeholder text can also be included.
A prefix can be used to denote a currency type.
Helper text conveys additional information about the dropdown, such as requirements or character counts. When a dropdown selection is invalid, an error message replaces the helper text and is displayed until the error is fixed.
Form elements can be marked as either required or optional.
Required form elements are used when the majority of the form elements are optional, but a few need to be marked as required.
Optional form elements are used when the majority of the form elements are required, but a few elements need to be marked as optional.
A dropdown is triggered by clicking or tapping anywhere within the dropdown container. Once triggered, a menu is exposed revealing the available options for that dropdown. After an option has been selected, the input text within the dropdown container updates to reflect the selection made. A dropdown can be closed by clicking anywhere outside the revealed menu, including the dropdown container itself.
- Populated inactive
- By default, a dropdown menu will show the entire list of items within the menu.
- A height property can be adjusted to control how many items can be displayed before a scrollbar appears to handle the overflow.
By default, a user can only select one item at a time. However, dropdowns can be set to allow users to make multiple selections dropdown menu. Selections are displayed as a comma-separated string within the input field and cropped with an ellipsis when they extend beyond the edge of the dropdown.
A clear button is displayed at the bottom of the menu so the user can easily deselect all selected items.
Menu placement and scale
By default, menus appear immediately below the dropdown container with no space in between. When activated, the menu always sits above any helper text that’s present. The menu width should always match that of its corresponding dropdown container.
Menus should anchor to the top of the dropdown container and expand upward if the dropdown is near the bottom of the viewport and doesn’t have enough room to fully expand.
If the viewport is not tall enough to accommodate the entire menu, the menu should shrink to just within the viewport and display a scrollbar. The menu defaults to the bottom placement, but will switch to the top placement if that affords more of the menu to be displayed.
When part of a dropdown, the default menu keyboard interactions are overridden as follows:
|Tab||Tabbing onto the dropdown focuses the input of the dropdown. Once the menu is open, Tab takes you to the next interactive element in the DOM flow.|
|Return||Pressing the Return key opens the dropdown menu. When a user has highlighted a menu item, Return selects or deselects it.|
|Up arrow or Down arrow||Pressing the Up arrow or Down arrow cycles through the menu options.|
|Esc||Pressing Esc while a dropdown is open closes the dropdown and retains focus on the dropdown input.|
Single-selection dropdowns close once a menu item has been selected or anywhere outside the dropdown (as well as the input itself) is clicked.
Multi-select dropdowns will stay open until the user clicks the input or outside the dropdown.
By default, the input within the dropdown is set to read-only.