Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Select
A select allows users to choose one option from a list in a form.
Example
I am a select

See live code examples in Storybook
Usage

Select inputs allow users to submit data from a list of options. Although the select component itself is styled to align with the brand, the options components within it are left to be styled by the browser.

Best practices

Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.

Dos
  • Use when you have 6 or more pre-defined, mutually exclusive options for the user to choose from (instead of radio buttons)
  • Have a default selection when possible
  • Use "Select" as the default placeholder option if there's no logical default option
  • Labels should be concise
Don'ts
  • Don't use a select for navigational needs. A dropdown menu will suffice
  • Don't use wordy labels for the options, aim for 1-3 words
Content guidelines Labels
  • Write labels succinctly so they're no more than 3 words
  • Write in sentence case
  • Avoid punctuation and articles ("the," "a," "an")
Select options
  • Start with "Select" as a placeholder if there isn't a default option
  • Options should be related to intended functionality if presenting a list of actions
  • List options alphabetically or in a logical order (like frequency of use)
  • Write in sentence case
  • Avoid punctuation and articles ("the," "a," "an")
States Default

Indicates that the user can interact with the select component.

Select label
Disabled

Indicates that the user is unable to interact with the select component.

Select label
Required

Indicates that the select dropdown requires the user to make a selection.

Select label
Error

Indicates that an error occurred within the select dropdown.

Select label
Validation

Real-time validation helps to streamline the process and keep data clean when the user is filling out forms.

Accessibility Relevant WCAG Guidelines
  • 1.3.1 Info and Relationships A
  • 2.1.1 Keyboard
Importance
  • Select allows all users to better understand how form items are related based on their grouping
Visual expectations
  • Select include some indication that they are expandable/interactable
Code expectations
  • Select list item has aria-haspopup="true" and aria-expanded="false"
  • There is another list of <option> elements with the <select> element on its child elements
  • Will have aria-required="true" if applicable
Expected actions Screen reader
  • Reads "option name, menu popup collapsed, button, required (if applicable)"
Keyboard
  • Enter: selects option (which collapses select)
  • up/down arrows: moves focus up and down (which expands the select)