Picker

Version 9.0.0

Pickers (sometimes known as "dropdowns" or "selects") allow users to choose from a list of options in a limited space. The list of options can change based on the context.

Image illustrating pickers in open and closed states. Picker in closed state, label Transition selected value None. Picker in open state, label Easing, selected value Ease out, other menu options Ease in, Ease out, Ease in-out, None.
DateVersionSpectrumFeb 24, 20239.0.0In progressApr 06, 20228.0.0DownloadFeb 24, 20227.1.0DownloadFeb 07, 20227.0.0DownloadDec 03, 20216.0.2In progressFeb 26, 20216.0.1DownloadApr 23, 20206.0.0DownloadFeb 26, 20195.2.0DownloadAug 22, 20185.1.0DownloadAug 13, 20185.0.1DownloadApr 19, 20195.0.0Download

Anatomy#

Image illustrating through labels the component parts of a picker in its open and closed states, including its label, required asterisk, field button, chevron, menu, menu options, and help text with description or error message.Image illustrating through labels the component parts of a picker in its open and closed states, including its label, required asterisk, field button, chevron, menu, menu options, and help text with description or error message.

Options#

Key example of a picker with a label. A picker in the closed state with the label Country and placeholder text Select a country, followed by ellipsis.

Label#

Pickers 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 pickers without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).

Key example of 2 pickers with different label positions. A picker in the closed state with the label Country placed above it. A picker in the closed state with the label Country placed on the left side of the picker.

Label position#

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.

Key example of a picker with a placeholder. A picker in the closed state with the label Country and placeholder text Select a country, followed by ellipsis.

Placeholder#

The placeholder text, also commonly known as “ghost text,” prompts a user to select an option from the picker menu. It disappears once a user selects an option.

Key example of a picker with a selected value. A picker in the closed state with the label Country and a selected value of United States.

Value#

The value shows the option that a user has selected.

Key example of a picker with customized width, showing two pickers of different widths.

Width#

The width of a picker can be customized appropriately for its context. This option is not applicable to quiet pickers.

Key example of four pickers with top labels showing the size options available including small, medium, large, and extra-large. UI text is: label, Country. Selected option, Select a country.

Size#

Pickers come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

Key example comparing a non-quiet and a quiet picker.

Quiet#

By default, pickers 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 pickers 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.

Key example of optional and required pickers. A picker in the closed state with the label Country (optional) and placeholder text Select a country, followed by ellipsis. A picker in the closed state with the label Country (required) and placeholder text Select a country, followed by ellipsis. A picker in the closed state with the label Country and an asterisk and placeholder text Select a country, followed by ellipsis.

Required or optional#

Pickers can be marked as optional or required, depending on the situation. For required pickers, there are two styling options: a “(required)” label or an asterisk. If you use an asterisk, be sure to include hint text to explain what the asterisk means. Optional pickers are either denoted with text added to the end of the label — “(optional)” — or have no indication at all.

The asterisk used in this component is an icon that has specific spacing from the label text — not part of the label text itself.

A key example of a picker in the open state displayed on a mobile device. The menu is displayed in a tray at the bottom of the device's screen.

Menu container#

On mobile, the menu can be exposed in either a popover or a tray. Use a tray when the number of options is too overwhelming for a popover.

Key example of a picker with an error. A picker in the closed state with the label Page template and a selected value of Home, with a red border and an alert icon indicating an error.

Error#

A picker 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.

Key example of a disabled picker. A picker in the closed, disabled state with the label Page template and a selected value of Home.

Disabled#

A picker 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.

Key example of a read-only picker. Label, Country. Selected value, United States. An arrow cursor hovers over and highlights the selected value text in blue, to copy it.

Read-only#

Pickers have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A picker does not have a read-only option if no selection has been made.

Key example of a picker using help text description and error message. Picker label, Preferred contact method. Prompt text, Select contact method… Help text shown in gray color, Select the best way to contact you in case there’s an issue with your account. Error message shown in red color, Select a contact method.

Help text (description and error message)#

A picker can have help text below the field to give extra context or instruction about what a user should select. The help text area has two options: a description and an error message. The description communicates a hint or helpful information, such as specific requirements for what to choose. The error message communicates an error for when the selection requirements aren’t met, prompting a user to adjust what they had originally selected.

Table of options#

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.

PropertyValuesDefault Valuelabeltext / nothing–label positiontop /sidetopplaceholdertext–valuetext / nothing–widthnumber
Not applicable to quiet picker.
–sizesmall / medium / large / extra-largemediumis quietyes / nononecessity indicatortext / icon/ nothingiconis requiredyes / nonomenu containerpopover / tray
The option to display the menu in a tray is available on mobile devices only.
popoveris erroryes / nonois disabledyes / nonois read-onlyyes / nonodescriptiontext / nothingnothingerror messagetext / nothingnothing

Behaviors#

Key example of regular and quiet pickers illustrating the minimum width. A regular picker with the label State and the selected value of CA. A quiet picker with the label State and the selected value of CA.

Minimum width#

The minimum width for a picker is 2× the height of the field button. This guarantees that small pickers are readable and easy to target on touch devices. Quiet pickers do not have a minimum width; their width depends on the length of the text.

Key example of text overflow behavior in a dropdown. A label with the wrapping text Select the size you want this export to be. A dropdown with the truncated selected value of Large select this followed by ellipsis. A menu with the wrapping text Small works best for mobile phones.

Text overflow#

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.

Key example of a picker’s help text in overflow, wrapping to two lines. Picker label, Preferred contact method. Prompt text, Select contact method… Help text shown in gray color, Select the best way to contact you in case there’s an issue with your account.

Help text overflow#

When the help text is too long for the available horizontal space, it wraps to form another line.

Key example of showing the menu height of a picker. Picker label, Country. Selected option, United States. 11 options, Tunisia, Turkey, Turkmenistan, Tuvalu, Uganda, Ukraine, United Arab Emirates, United Kingdom, United States, Uruguay, Uzbekistan.

Menu height#

The picker menu can be as tall as necessary to show as many options as possible in the available space. There is no maximum height.

Key example of pickers in Windows “high contrast black” theme with label “Picker”, disabled picker with label “Disabled picker”, and selected picker with menu displaying options labeled “Option”, “Selected option” in selected state, and “Disabled option” in disabled state.

Windows high contrast mode#

In Windows high contrast mode, picker should be displayed using the high contrast theme-specified colors for buttons. By default, border color should be the same as the button text color and labels should use default text color. In hover and keyboard focus states, the border color should display as the button border color. In the disabled state, border and text color should display as the disabled color. Items in a picker menu should display with default text color. A selected item should have the background and text colors defined for selected text.

Picker (Windows high contrast mode) UI kit

Usage guidelines#

Include a label#

Every picker should have a label. A picker without a label is ambiguous and not accessible.

do
Key example showing the correct usage of a picker label. A picker with the label Country of birth and the selected value of United States.
dont
Key example showing the correct usage of a picker without a label. A picker with no label and the selected value of United States.

Review label-less designs#

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”).

do
Key example showing the correct usage of a picker without a label. A quiet picker with the selected value of Sort by date.

Keep menu items concise#

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.

do
A key example showing correct picker menu item text length. A picker in the open state with the label size and placeholder text Select an option followed by ellipsis, a menu with the items Small, Medium, and Large.
dont
A key example showing incorrect picker menu item text length. A picker in the open state with the label size and placeholder text Select an option followed by ellipsis, a menu with the items Small (works best for mobile phones), Medium (all-purpose), and Large (select this one for printing).

Choose an appropriate width#

When possible, the field button width should be wide enough so that any chosen menu items can be displayed in full.

do
Key example showing the correct width of a picker. A picker with the label Country and the selected value of United States of America.
dont
Key example showing the a picker with incorrect width. A picker with the label Country and the selected value of United Sta followed by ellipsis to show the truncation of the words United States.

Follow capitalization rules#

Field labels, placeholder text, and menu items should be in sentence case.

do
A key example of a picker with correct sentence case capitalization. A picker with the label Country of birth and the placeholder text Select a country followed by ellipsis.
dont
A key example of a picker with incorrect title case capitalization. A picker with the label Country of Birth and the placeholder text Select a Country followed by ellipsis.

Mark the minority of pickers in a form as required or optional#

In a single form, mark only the required fields or only the optional fields, depending on whichever is less frequent in the entire form. If most of the pickers are optional, only the required fields should be given an asterisk or have labels appended with “(required)”. If most of the pickers are required, only the optional fields should be appended with “(optional)”. An asterisk should never be used to note that a picker is optional.

do
A key example showing correct usage of required and optional pickers. A picker with the label View by and the placeholder text Select an option followed by ellipsis. A picker with the label View by and the placeholder text Select an option followed by ellipsis. A picker with the label Country (optional) and the placeholder text Select an option followed by ellipsis.
dont
A key example showing incorrect usage of required and optional pickers. A picker with the label View by (required) and the placeholder text Select an option followed by ellipsis. A picker with the label View by (required) and the placeholder text Select an option followed by ellipsis. A picker with the label Country and the placeholder text Select an option followed by ellipsis.

Use help text to show context#

A picker’s description in the help text is can communicate what to select or how to select an option. This includes information such as:

  • An overall description of the picker options
  • Hints for what kind of information to choose
  • More context for why a user needs to make a selection

The help text’s message should not simply restate the same information in the label in order to prompt someone to interact with a picker. Don’t add help text if it isn’t actually relevant or meaningful to a user in order to try to maintain layout continuity with other inputs that require help text.

do
Key example of correct usage of help text with a picker. Picker label, Preferred contact method. Prompt text, Select contact method… Help text shown in gray color, Select the best way to contact you in case there’s an issue with your account.
dont
Key example of incorrect usage of help text with a picker. Picker label, Preferred contact method. Prompt text, Select contact method… Help text shown in gray color, Choose your preferred contact method.

Switch help text with error text#

The help text area also displays an error message. When a picker already includes help text and an error is triggered, the help text is replaced with error text. Once the error is resolved, the help text description reappears below the picker.

Since one gets replaced by the other, the language of the help text and error text need to work together to convey the same messaging. Help text explains the requirement or adds supplementary context for how to complete the interaction. Error text tells a user how to fix the error by re-stating the selection requirements or describing the necessary interaction. Make sure that the help text and the error text include the same essential information so that it isn’t lost if one replaces the other (e.g., minimum requirements).

do
Key example of correct usage of switching help text with error text in a picker. Required picker label, Preferred contact method. Prompt text, Select contact method… Help text shown in gray color, Select the best way to contact you in case there’s an issue with your account. Error message shown in red color, Select a contact method.
dont
Key example of incorrect usage of switching help text with error text in a picker. Required picker label, Preferred contact method. Prompt text, Select contact method… Help text shown in gray color, Select a contact method. Error text shown in red color, Select a contact method.

Write error text that shows a solution#

Write error messaging in a human-centered way by guiding a user and showing them a solution — don’t simply state what’s wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error to a user.

Error text should be written in 1-2 short, complete sentences and in a clear and straightforward way. End sentences with a period, and never with an exclamation point. For pickers, the nature of the error is often related to something that needs to be fixed for in-line validation, so a helpful tone is most appropriate. For example, if someone were to miss selecting an option to note as their preferred contact method, write the error text like you’re offering a hint or a tip to help guide them to understand what needs to be selected: “Select a contact method.”

do
Key example of correct way of writing an error message. Required picker, label Preferred contact method. Placeholder text prompt, Select contact method… Error text shown in red color, Select a contact method.
dont
Key example of correct way of writing an error message. Required picker, label Preferred contact method. Placeholder text prompt, Select contact method… Error text shown in red color, Invalid field.

Internationalization#

Key example of picker internationalization for right-to-left languages. Layout of picker is mirrored, label and menu items are in Arabic.

RTL#

For RTL (right-to-left) languages, the layout of the picker is mirrored. Text and the checkmark are right-aligned while the chevron is left-aligned.

Keyboard interactions#

When the popover menu is closed:

KeyInteractionSpace or Down ArrowOpens the popover menu. The focus is set on the menu item selected.

When the popover menu is open:

KeyInteractionSpaceSelects the menu item in focus, closes the popover menu and moves focus to the field button.Up or Down ArrowMoves focus to previous or next menu item in the popover. Does not loop when the last or first menu item is reached.EscCloses the popover menu and moves focus to the field button.

Changelog#

DateNumberNotesFeb 24, 20239.0.0
  • Updated read-only option design
Apr 06, 20228.0.0
  • Updated all colors to 6.0.0
Feb 24, 20227.1.0
  • Added size option
Feb 07, 20227.0.0
  • Updated read-only option design
Dec 03, 20216.0.2
  • Moved placement of checkmark to left side of menu items
Feb 26, 20216.0.1
  • Updated placeholder text color for higher contrast
Apr 23, 20206.0.0
  • "Dropdown" has been renamed to "picker"
Feb 26, 20195.2.0
  • Added read-only option
  • Updated border color to be more accessible
Aug 22, 20185.1.0
  • Added text overflow behavior
Aug 13, 20185.0.1
  • Changed selected item text color from blue 500 to gray 800
Apr 19, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)
  • Added RTL (right-to-left) guidelines

Design checklist#

check

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

check

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

check

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

check

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

check

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

unchecked

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

check

Content design

UI language and information design considerations have been incorporated into component design.

check

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

check

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

check

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

check

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

check

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

check

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

check

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

check

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

check

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

check

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.