Select
An input element that lets users choose one option from an options menu.
Page sections
Type
Default
Usage
While Select and Dropdown appear similar, they have different usages. Select is used in scenarios where users are selecting an option and submitting data (such as a form). Dropdown is used in scenarios where users are choosing an action that changes the view of the page or navigates elsewhere.
Behavior
Select relies on the browser default options menu for built-in accessibility benefits and mobile-friendly functionality. This is a Picker on iOS and a Dialog on Android.
Visual style
Select can be variable width and should align to the content they’re paired with when appropriate.
Content strategy
- Use Title Case for Select labels
- Keep labels short (~1 – 2 words)
- Omit CTAs from labels (e.g. “State” not “Select a State”)
- Exceptions to label length include necessary differentiation (e.g. Confirm New Password) and more editorial approaches (e.g. Where are you getting your flu shot?). When possible, avoid editorial labels by using headlines, body copy, etc to inject voice and context.
- Do not punctuate Select menu options
- Generally, use Title Case for short (~1 – 3 word) Select menu options. Sentence case is acceptable for more editorial phrasings, but opt for shorter options when possible (e.g. Mail Order vs Receive prescription by mail)
Accessibility
Keyboard/focus expectations
- Enter/Spacebar opens select element and activates selected option
- Tab/Shift+Tab shifts focus to/away from select element
- Up/down arrows move between selectable options
Screen reader expectations
- Element is announced as a select element. Ex. “Select” / “Picker” (Voice Over iOS)
- Required/optional is announced
- Options are read as user arrows through. Ex. “Option 1…”
- Selected option is announced. Ex. “Option 3, selected”