Dropdowns

Updated May 12, 2026

Overview

A dropdown reveals a list of options when triggered.
When closed, it displays the selected option or options.
A dropdown usually takes up less space than other selection controls, such as a radio button group. It's commonly used to keep interfaces clean and compact while offering multiple choices.
It can be used alone or in a form.
To use 2 dropdowns for progressive disclosure, show top-level dropdown first, and then show second controls based on the user’s selection.
We offer 3 dropdown types:

Filterable

Multi-option

Simple

Anatomy

This is the generic anatomy of all dropdown variants. For the anatomy of a specific variant, visit its unique page.

Anatomy (generic)

States

Warning

States are visual indicators used to communicate a component’s interaction status. Learn more about commonly used component states in our General specs

Component-specific states

Hover

With error

Default

Selected

Hover

Secondary focus

Disabled

Variations

Each dropdown contains a menu of options. These can have multiple variations depending on the use case:

Typical

With subtext

With divider

With footer

Color mode

Light

Dark

Progressive disclosure

Dependent dropdowns can be used for progressive disclosure by revealing a second dropdown after the user has selected an option from the first. This helps the user to focus completely on the first selection.

Dependent dropdowns example

Dos and don'ts

Here is guidance on all dropdown variants, for specific guidance check the variant page.

Don't

Other names

Dropdown, dropdown box, dropdown field, dropdown list, input list, picklist, select, selector, combobox.

Labels

Avoid using generic single-word labels, like Name or ID for dropdown labels.
The ambiguous nature of these labels can cause users to be confused about their meaning.
Also, Name or ID fields from other sources might appear on the same screen, causing confusion.
Instead, always add a modifier to generic single-word labels, like Name or ID. For example:
Employee name
Project ID
Expense type

Hint text

Use hint text only if the dropdown label does not provide enough context to help users interact with the field.

Write hint text in full sentences with ending punctuation. This makes screen readers pause before reading out any error or warning message after the hint text.
Do not use hint text that repeats the message in the dropdown label.

Placeholder text

You can use placeholder text if it does not provide critical information for users but instead provides a small amount of additional context.

Make sure to provide enough context in the dropdown label and hint text so that users can easily interact with the dropdown without the aid of the placeholder text.

Localization

Find the maximum number of characters that can be displayed for menu item labels, subtext, and headings.

Make sure the English string leaves enough space for longer languages.
Communicate the restrictions to translators.

How it works

Make sure the dropdown select component is easy to navigate with a keyboard and that focus order is correct.

Accessibility requirements

Label

Use a descriptive UI label that clearly explains what happens if the user selects the dropdown select.

Hint text

Include hint text below the component label and above the trigger.
Explain what data the user should enter and the format to use. For example, DD/MM/YYYY.

When focus is on the trigger, make sure keyboard commands work as follows.

Enter opens the dropdown select.
Escape closes the dropdown select.
Tab moves onto the dropdown select but does not open it. The next tab press moves off the dropdown select.

Focus

When a user opens the dropdown select using Enter, focus moves directly to the first option in the dropdown select. The user can use Enter or Space to select the option and close the dropdown select.

Keyboard commands

Key	Function
Up	Opens the dropdown select.
Down	Opens the dropdown select.
Space	Opens or selects the dropdown select.

When the drop down select is open

Key	Function
Up	Changes the selected option to the one above the currently selected option.If no option is currently selected, selects the top option.If the top option is currently selected, does nothing.
Down	Changes the selected option to the one below the currently selected option.If no option is currently selected, selects the top option.If the bottom option is currently selected, does nothing.
Space	Closes the dropdown select.
Enter	Closes the dropdown select.
End (Windows) or Command and Down arrow (Mac)	Selects the last option in the list.
Home (Windows) or Command and Up arrow (Mac)	Selects the first option in the list.
Escape	Closes the dropdown select.
Tab	Closes the dropdown select. Moves focus to the next focusable element on the page.

Testing

We tested the component using the following software.

Computer

Operating System	Version
MacOS Ventura	13.2
---	---
Safari	16.1
Chrome	105.0.5195.102

Assistive technology

Type	Name
Screen reader	VoiceOver (Mac)
Screen reader	NVDA (Windows)
Speech recognition	Voice Control (Mac)

Resources

Date	Changes
March 2026	Added Progressive disclosure section to show how dependent dropdowns can be used to reveal more options.
Jun 2025	Created Dropdown overview page and divided Dropdown into 3 separate component variants:Filterable dropdownMultiSelect dropdownSimple dropdown
December 2024	Updated Error on load variation to be in-line with the accessibility standards.Add autocomplete, autosuggest, combobox as also-known-as below the page heading.
November 2024	Added 2 new versions of dropdowns: with subtext (with descriptions) and with error on load.Updated Anatomy, Variations and DOs and DONTs accordingly.
October 2024	Updated Variations, added On surface.Updated States.
September 2024	New version created. Previous version archived in the frozen Product design system.

Dropdowns

Overview

Anatomy

States

Component-specific states

Menu item states

Variations

Popover menu

Color mode

Progressive disclosure

Dos and don'ts

Other names

Labels

Hint text

Placeholder text

Localization

How it works

Accessibility requirements

Label

Hint text

Navigation

Focus

Keyboard commands

When the drop down select is open

Testing

Computer

Assistive technology

Resources