Dropdown

A dropdown displays a list of selectable options in a floating panel, allowing users to choose from predefined choices in a compact interface.

Design

A Dropdown is a component that allows users to select an option from a list of choices that appears when they interact with a trigger (usually a button). It helps keep interfaces clean by hiding secondary or large sets of options until needed. Dropdowns are especially useful when space is limited or when the user needs to choose from a set of mutually exclusive actions or values.

This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.

When to use it (and when not to)

Use the Dropdown when:

• You need to offer 4–12 options without overwhelming the interface.
• The selection is not required to be immediately visible until the user interacts.
• The user needs to switch between predefined values or trigger an action.
• Space is constrained and a compact UI is preferred.
• You need to organize secondary actions related to a primary object or context.

Avoid using the Dropdown when:

• The user needs to compare all options at once (consider radio buttons or a list).
• The selection requires frequent or rapid access — a persistent UI element is better.
• For highly visible or critical actions (use explicit buttons instead).
• The options include complex content like large images or long descriptions (use a menu or a select list instead).

Quick summary of accessibility & consistency

Use native HTML elements whenever possible, maintain proper focus order, and provide clear visual feedback for interactive states. Make sure text and icons meet minimum contrast ratios, and that all actions can be performed using a keyboard alone. If the dropdown’s purpose isn’t obvious from context, provide an accessible name or label to help screen reader users understand its content and function.

Properties

State : Rested

Dropdown

Width: 343

Border radius: 0

Dropdown

Background color:

color-fill-contrast-emphasis#ffffff

color-fill-contrast-emphasis#ffffff

Border weight: 1

Label

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Helper Text

Width: 315

State : Hover

Dropdown

Background color:

color-fill-contrast-default#f5f5f5

color-fill-contrast-default#e4e4e4

Label

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

State : Filled

Dropdown

Background color:

color-surface-neutral-subtle#f5f5f5

color-surface-neutral-subtle#f5f5f5

Border weight:

stroke-sm1px

 

stroke-sm1px

 

State : Disabled

Dropdown

Background color:

color-fill-neutral-muted#f5f5f5

color-fill-neutral-muted#a8aaac

Border weight:

stroke-sm1px

 

stroke-sm1px

 

State : Focus

Dropdown

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Border weight: 2

Border radius: 2

Styling

Colors

Name	Applied as	Applied to
color-foreground-neutral-default	Text color	Label, Range
color-foreground-neutral-default	Text color	Label, Range
color-foreground-neutral-subtle	Text color	Label
color-foreground-neutral-subtle	Text color	Label
color-surface-neutral-default	Background color	List + Button
color-surface-neutral-default	Background color	List + Button
color-surface-neutral-subtle	Background color	Dropdown
color-surface-neutral-subtle	Background color	Dropdown
color-border-focus-neutral-default	Border color	Dropdown
color-border-focus-neutral-default	Border color	Dropdown
color-border-neutral-default	Border color	Dropdown
color-border-neutral-default	Border color	Dropdown
color-border-neutral-muted	Border color	Dropdown
color-border-neutral-muted	Border color	Dropdown
color-fill-contrast-default	Background color	Dropdown
color-fill-contrast-default	Background color	Dropdown
color-fill-contrast-emphasis	Background color	Dropdown
color-fill-contrast-emphasis	Background color	Dropdown
color-fill-neutral-muted	Background color	Dropdown
color-fill-neutral-muted	Background color	Dropdown

Spacing

Name	Applied as	Applied to
stroke-sm	Border weight	Dropdown
stroke-sm	Border weight	Dropdown

Text Styles

Name	Applied as	Applied to
Lorem Ipsum typography-body-6	Text style	Label, Required
Lorem Ipsum typography-body-6	Text style	Label, Required
Lorem Ipsum typography-body-8	Text style	Helper Text, Range
Lorem Ipsum typography-body-8	Text style	Helper Text, Range

Usage

Do

Guidance on how to use a component.

• Keep option labels concise and easy to scan.
• Organise long option lists alphabetically or by category to reduce cognitive load.
• Use placeholder text that clearly indicates the expected action, not generic text (‘Select model’ instead of ‘Choose’).
• Pre-select an option only if there’s a strong default that benefits the user.
• Use consistent terminology across all dropdowns in the product.
• Adapt dropdown width to fit the longest option when possible (avoid truncation when clarity is important).

Don’t

Guidance on what to avoid when using a component.

• Don’t overload the dropdown with too many items — consider a searchable dropdown if the list is very long.
• Don’t mix unrelated types of content inside the list (e.g., options + links + extra actions).
• Don’t use vague or repetitive labels (‘Option 1’, ‘Item’, ‘Select…’) — they slow users down.
• Don’t rely on hover to indicate state on touch devices — ensure that the trigger communicates clickability clearly.
• Don’t hide critical information inside a dropdown if it impacts user decisions.
• Don’t auto-open the dropdown on focus — it can be disorienting and doesn’t reflect typical usage patterns.

Develop

Styles

A dropdown displays a list of selectable options in a floating panel.

Recipes

Select List

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Powertrain

333 mi

Placeholder

• 
  Powertrain

  333 mi

  Option 1
• 
  Powertrain

  333 mi

  Option 2
• 
  Powertrain

  333 mi

  Option 3

source code

Checkbox List

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Select options

• Option 1
• Option 2
• Option 3
• Option 4
• Option 5
• Option 6

Clear All Show results

source code

Accessibility

The dropdown follows the WAI-ARIA Listbox pattern.

For designers

• All list items and states must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.

For developers

To ensure the list meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:

1. Keyboard Navigation
   • Tab: Moves focus to the dropdown trigger.
   • Enter or Space (on trigger): Opens the menu.
   • Up/Down Arrow Keys: If closed, opens the menu and moves focus to the first/selected option. If open, navigates through list items.
   • Enter: Selects the focused option.
   • Esc: Closes the dropdown without making a selection.
   • Tab / Shift+Tab: Moves focus out of the component and closes the menu.
2. Focus Ring / Visible Focus
   • List items must display a visible focus style, not only a colour change.
3. Screen Reader Support
   • Ensure the list has an accessible name when the context isn’t obvious (using aria-label or aria-labelledby).
   • Screen readers will automatically announce the number and position of items (“list with 5 items”, “item 1 of 5”, etc.) when using native list markup.
4. Responsive and Tap Targets
   • Interactive area must be at least 44 px in height to support touch accessibility.
5. Roles and ARIA attributes
   • For the dropdown trigger: role="combobox", aria-haspopup="listbox", aria-expanded="true/false" (dynamic), aria-controls="dropdown-list-id".
   • For the list container: role="listbox", provide an id referenced by the trigger.
   • For each option: role="option", aria-selected="true/false".
   • If the component supports search inside the dropdown: input uses role="searchbox" or a standard <input> with correct labeling. Dynamically filter options while preserving arrow-key navigation.
6. Focus order
   • Tab → dropdown trigger: user sees focus indicator on the closed state.
   • Enter/Space → open the dropdown: dropdown list receives focus (usually the selected item, or the first option if nothing is selected).
   • Arrow keys to navigate options.
   • Enter to select → focus returns to the trigger (now in “filled” state).
   • Tab moves to the next form element.
   • If dismissing with Esc: focus returns to the dropdown trigger.
   • If clicking outside: dropdown closes, focus must remain on the trigger for accessibility consistency.

Roles & attributes

Element	Attributes
Trigger button	aria-haspopup="listbox", aria-expanded, aria-labelledby (pointing to a visible label)
List container	role="listbox". Add aria-multiselectable="true" for checkbox-style dropdowns.
Each option	role="option". Set aria-selected="true" on the active option.

Use aria-activedescendant on the listbox to communicate the currently focused option without moving DOM focus.

Keyboard interaction

Key	Action
Enter / Space	Open dropdown or select the focused option
↑ / ↓	Move focus between options
Home / End	Move focus to first / last option
Escape	Close dropdown, return focus to trigger