Dropdown

Required. The label names what the dropdown controls.

• Use sentence case
• No ending punctuation
• Use a noun or noun phrase
• Aim for 1–3 words

The value is the option the user selects. Each option should be short, distinct, and easy to scan.

• Use sentence case, except for proper nouns or branded terms
• No ending punctuation
• Use parallel structure

Input dropdowns have multiple layout options.

• Stacked: The field’s label is outside and above the field.
• Floating: The label is inside the text box and animates upward on focus to make room for the input value.

Use an asterisk to indicate a field is required. Display the word “optional” in parentheses next to the field label if the field isn’t required.

If most fields are required, only indicate the optional fields. If most fields are optional, only indicate the required fields.

Placeholder text, or “ghost text,” gives users a hint about the expected input format. Use realistic examples of what a user might enter, not descriptions of the field.

Placeholder text disappears when the user starts typing, so don’t use it for instructions or required information.

• Use sentence case
• No ending punctuation

Helper text is placed below the field and informs the user of any requirements or disclaimers. Helper text can be shown persistently or on focus.

Error messages appear below the field when the input doesn't meet the required format or conditions. The error message replaces any existing helper text.

Keep the tone neutral, don’t blame or scare the user. Clearly inform users know how to fix it.

• Use sentence case
• No ending punctuation
• Avoid technical language or filler words like “please”, “sorry”, or “oops”

There are two sizes available: 40px and 48px. These match our button sizes to account for situations where they are inline together. Avoid mixing different sizes in a single form.

Users cannot focus on or change read-only fields. Their input is derived from other parts of the UI and is intended to be viewable for reference. The input is submitted with the form.

Users cannot focus on or change disabled fields. Their availability depends on certain requirements. No value will be submitted from disabled fields.

Content that extends beyond the width of the field is truncated before the icon.

Bordered dropdowns have a minimum width of 2x their height. Borderless dropdowns do not have a minimum width since they hug their contents.

Dropdown buttons and menus have a max width of 280px.