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)
Section titled “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
Section titled “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
Section titled “Properties”State : Rested
Section titled “State : Rested”Dropdown
Width: 343
Border radius: 0
Dropdown
Background color:
color-fill-contrast-emphasis#ffffffcolor-fill-contrast-emphasis#ffffff Border weight: 1
Label
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Helper Text
Width: 315
State : Hover
Section titled “State : Hover”Dropdown
Background color:
color-fill-contrast-default#f5f5f5color-fill-contrast-default#e4e4e4Label
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073State : Filled
Section titled “State : Filled”Dropdown
Background color:
color-surface-neutral-subtle#f5f5f5color-surface-neutral-subtle#f5f5f5 Border weight:
stroke-sm1pxstroke-sm1pxState : Disabled
Section titled “State : Disabled”Dropdown
Background color:
color-fill-neutral-muted#f5f5f5color-fill-neutral-muted#a8aaac Border weight:
stroke-sm1pxstroke-sm1pxState : Focus
Section titled “State : Focus”Dropdown
Border color:
color-border-focus-neutral-default#c57046color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 2
Styling
Section titled “Styling”Colors
Section titled “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
Section titled “Spacing”| Name | Applied as | Applied to |
|---|---|---|
stroke-sm | Border weight | Dropdown |
stroke-sm | Border weight | Dropdown |
Text Styles
Section titled “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 |
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).
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.