Dropdown
Dropdowns show a list of choices for users to fill forms, filter, or sort content.
Published: Last updated:
Overview
There are three dropdown types, each with different functions: default, multiselect, and type-ahead.
When to use
Dropdowns can appear in forms, modals, or side panels to filter or sort content. They are a styled version of the select component and can be customised as needed.
When to use
Limited options
Avoid dropdowns for just two choices; use a response button input instead.
Nesting
Don’t nest dropdowns or present overly complex information; keep options simple and clear.
Form-based or mobile
For form-heavy or mobile experiences, use the native HTML select for easier submission and mobile usability.
|
Variant
|
Purpose
|
|---|---|
| Dropdown | Allows the user to select one option from a list. |
| Multiselect | Allows the user to select multiple options from a list and filter. |
| Type-ahead | Allows the user to either select single or multiple options from a large list or filter through the options by typing. |
Anatomy
Dropdowns have four parts: support text (labels or helper text), the field, the menu, and its options. Labels and helper text guide users to make informed selections.
- Label text: Text that guides users on the required input for the field. It is mandatory unless an approved accessibility exemption applies.
- Assistive text (optional): Additional text that offers support or context to the input label.
- Menu: Displays the list of available options when opened.
- Options: An individual choice within the menu.
- Helper text (optional): Text that offers additional guidance or context for the input field, often explaining the required data format.
- Parent checkbox: In multiselect dropdowns, selects all menu options at once.
Size
Dropdowns come in two standard heights: small and medium. Offering multiple sizes adds layout flexibility. However, keep form components consistent in size on the same page, for example, match dropdowns with text inputs and buttons. When unsure, choose the medium size by default.
|
Size
|
Height (px/rem)
|
Use case
|
|---|---|---|
| Small | 32 / 2 | Use when space is limited |
| Medium | 44 / 2.75 | This is the standard size and the most frequently used. If unsure, opt for the medium size |
Width
Dropdowns have no fixed minimum or maximum width and can be adjusted to suit their context.
Small input pending
Labels
Clear labelling helps users understand what information to enter in a text input. Text fields should always have a label.
- Use sentence-style capitalisation for all labels, except for product names and proper nouns.
- Keep labels short and concise.
- Do not use colons after label names.
Assistive / helper text
Optional assistive and helper text provides relevant information to assist users in accurately completing a field and is often used to clarify the required data format.
Assistive text sits directly below the input label and offers support or context to the input label, whereas the helper text offers additional guidance or context for the input field, often explaining the required data format.
- Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.
- When used, helper text appears persistently beneath the field, except when replaced by an error message.
Placeholder text
Placeholder text is optional and appears in the dropdown field when no option is selected. Avoid placing crucial information in placeholder text, as it disappears once a selection is made. Important details should be included in the dropdown’s label or helper text, which remain visible. Use clear, concise placeholder text to guide interaction—for example, “Choose an option.”
Option text
Dropdown option text should be short, clear, and factual; avoid lengthy descriptions. Do not include decorative images or icons within dropdown options. Present options in alphabetical order for easy scanning.
Parent checkbox text
As part of the options list, the parent checkbox text should not be phrased as an action. Use “All” to represent selecting all options, or add a clarifying descriptor like “All roles” to specify the selection scope.
Required vs optional
Dropdowns can be marked as required or optional based on various factors. For detailed guidance, see the form Usage section.
Behaviour
The behaviours described here apply to all dropdown variants. For variant-specific behaviours, refer to the respective sections below.
Direction
Dropdown menus open either upward or downward depending on their screen position. If near the bottom edge, the menu expands upward to avoid being cut off. By default, dropdowns open downward.
Elevation
When open, the dropdown menu uses a box-shadow to create a sense of depth above underlying content. This shadow style ($shadow-sm) is consistent with other overlay components like overflow menus and date pickers.
States
Dropdowns, type-aheads, and multiselects include several states for both their fields and menus: resting, hover, focus, error, disabled, and read-only. For detailed information on these states, please refer to the interactive states guidance found on the style tab.
Mouse
Users open a dropdown menu by clicking the caret icon or anywhere within the field. To close the menu, users can click the caret icon again or click outside the menu area.
- To select an option the user can click anywhere inside an option container.
- To clear a selected option from a list in a multiselect dropdown, click the “x” icon next to the value inside the tag.
Keyboard
Dropdowns, multiselects, and type-aheads are accessed using Tab, with option navigation via the Up and Down arrow keys. The keys for opening the menu and making a selection vary by variant.
Dropdown
Use a dropdown when a user must choose one option from a predefined list. Dropdowns are the optimal default for offering alternative choices. They are also a good choice when screen space is limited.
- Selecting a menu option closes the dropdown, replaces the placeholder with the chosen text, and keeps that option visible when reopened.
Multiselect
Use a multiselect when the user must choose multiple predefined options. They are useful for filtering or sorting content using several criteria. Each option includes a checkbox for multi-selection.
Making a selection
By default, the closed field shows placeholder text. Clicking it opens the menu of options, each with a checkbox on the left. The menu remains open while selections are made and closes when the field or outside area is clicked, or when Esc is pressed.
Feedback
- When options are selected, tags showing the selections’ title appear inside the field and offering a “clear” action in each.
- The placeholder text disappears once a selection has been made.
- Selected options move to the top of the menu in alphanumeric order when the menu is reopened.
- Unlike dropdowns and type-aheads, the menu stays open after each selection; users must click outside the menu or the parent field to close it.
Selecting all
The parent checkbox associated with the parent option makes it possible for the user to select all options from the list.
- The background fill for the “All” button does not change when selected and will continue to have the same background as the resting state.
The parent checkbox has a third indeterminate state and appears when some and not all options have been selected.
- Clicking on the unselected or indeterminate state selects all options.
- Clicking on the selected checkbox clears all options.
We recommend not using the parent checkbox in scenarios such as filters where choosing all and choosing none means the same.
Collapsing tags
Collapsing tags enhances the multiselect dropdown by consolidating multiple selected options into a single tag displaying the count and a customisable label, such as “3 selected.” This approach maintains a clean interface and prevents the field from becoming cluttered. Both the threshold for activation (e.g. after 3 selections) and the summary label are configurable to suit specific design needs. This feature is especially beneficial in contexts where space is limited or when a large number of selections are possible.
When to use
Use when the amount of options expected to be clicked exceeds the number of tags that can comfortably fit on no more than 2 lines inside the dropdown input.
Type-ahead
Use a Type-ahead to quickly narrow a long list of options and find the one you want to select.
- By default, the Type-ahead displays placeholder text in the field when closed.
- When hovering over the field, a text cursor appears.
- The menu opens when clicking anywhere in the field, allowing you to type and filter the list of options. Matching options remain visible, while non-matching options are temporarily hidden.
- After typing, a close (×) icon appears to the right of the text in the field, enabling users to clear their entry.
- Once an option has been selected it appears in the field.