Dropdowns allow users to choose from a list of options in a limited space. The list of options can change based on the context.
Dropdowns should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These dropdowns without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).
Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited.
The placeholder text, also commonly known as “ghost text,” is temporary and disappears once a user selects an option.
The value shows the option that a user has selected.
The width of a dropdown can be customized appropriately for its context.
By default, dropdowns have a visible background. This style works best in a dense array of controls where the background helps to separate the input from the surrounding container, or to give visibility to isolated buttons.
Alternatively, quiet dropdowns can have no visible background. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read.
Dropdowns can be marked as optional or required, depending on the situation. For required dropdowns, there are two styling options: a “(required)” label or an asterisk. Make sure to include hint text to explain what the asterisk means.
A dropdown can be marked as having an error to show that a value needs to be entered in order to move forward or that a value that was entered is invalid.
A dropdown in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that it may become available later.
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
text / nothing
top / side
text / nothing
yes / no
text / icon / nothing
yes / no
popover / tray
The option to display the menu in a tray is available on mobile devices only.
yes / no
yes / no
The minimum width for a standard dropdown is 2× the height of the field button. This guarantees that small dropdowns are readable and easy to target on touch devices. Quiet dropdowns do not have a minimum width; their width depends on the length of the text.
When the field label and menu text are too long for the available horizontal space, they wrap to form another line. The field text itself truncates at the end, but the text can be shown in full in the menu.
Every dropdown should have a label. A dropdown without a label is ambiguous and not accessible.
In rare cases where context is sufficient and a label could be absent, make sure to have the design reviewed and approved by an accessibility expert. These should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).
Keep menu items short and concise. Long menu items that cause text to wrap to multiple lines are discouraged. If text wrapping becomes a frequent concern, consider revising the text or use alternative UI patterns that will give your content more space.
When possible, the field button width should be wide enough so that any chosen menu items can be displayed in full.
Field labels, placeholder text, and menu items should be in sentence case.
In a single form, mark just the required fields or just the optional fields, depending on whichever mention is less frequent. For required dropdowns, there are two styling possibilities: a “(required)” label or an asterisk. Make sure to include some hint text at the end of the form to explain what the asterisk means.
For RTL (right-to-left) languages, the layout of the dropdown is mirrored. Text is right-aligned while the chevron and checkmark are left-aligned.
When the popover menu is closed:
|Space or Down Arrow||Opens the popover menu. The focus is set on the menu item selected.|
When the popover menu is open:
|Space||Selects the menu item in focus, closes the popover menu and moves focus to the field button.|
|Up or Down Arrow||Moves focus to previous or next menu item in the popover. Does not loop when the last or first menu item is reached.|
|Esc||Closes the popover menu and moves focus to the field button.|
|Aug 22, 2019||5.1.0|
|Aug 13, 2019||5.0.1|
|Apr 19, 2019||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.