Include a label

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

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

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.

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.

Follow capitalization rules

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

Marking required vs. optional pickers in forms

When labeling pickers in a form, only mark the minority type — either required or optional — to reduce visual clutter:

• If most pickers are optional, mark only the required ones (e.g., add an asterisk or "(required)").
• If most pickers are required, mark only the optional ones (e.g., append "(optional)" to their labels).

Never use an asterisk to indicate an optional picker.

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.

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 like minimum requirements.

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."

Use placeholder text for hints

Placeholder text provides hints about expected input values. When implemented properly, it enhances usability without compromising accessibility.

Placeholder text:

• always supplements, never replaces labels;
• uses disappearing text only for non-critical guidance. It never replaces the help text.
• is always paired with a visible label;
• is brief and instructional;
• is compatible with the screen reader. Ensure that placeholders are properly announced by screen readers by using appropriate ARIA attributes when needed.