Dropdown

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#f5f5f5

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#d4d2d1

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

Border weight:

stroke-sm1px

State : Disabled

Dropdown

Background color:

color-fill-neutral-muted#f5f5f5

color-fill-neutral-muted#a8aaac

Border weight:

stroke-sm1px

State : Focus

Dropdown

Border color:

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

Accessibility

For Design

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 Dev

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

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.
Focus Ring / Visible Focus
- List items must display a visible focus style, not only a colour change.
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.
Responsive and Tap Targets
- Interactive area must be at least 44 px in height to support touch accessibility.
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.
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.

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.