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
Switch
Switch are stylized toggles, similar to checkboxes, to indicate a boolean value.
Example
I am a switch

See live code examples in Storybook
Usage

The switch component is used to toggle if a control is enabled or disabled. The value of the switch is persisted at the moment the control is updated, without a separate save mechanism.

Alignment

Labels for switches are placed to the left of the switch.

Placement

Switches in JSTOR are often used when enabling or disabling features on the site. Their larger size and clear on/off state make them easy to use and understand.

Best practices
Dos
  • Use switches when users need to choose "yes" or "no" per option, with no indeterminate state
  • Switches should work independently from each other, unless there are switches to control groups
  • Switches should always include a label
  • Use switches when choices are not mutually exclusive
  • The list of choices should be in a logical order
  • Value of the switch should be persisted when the control is changed
Don'ts
  • Don't use switches when there are no choices or a choice is non-binary
  • Don't use where only one choice in a group is allowed. Consider using the radio button component instead
  • Don't make switches affect other switches unless there is a clear hierarchy of controls (aka master switch and sub-switches)
Content guidelines Labels
  • Labels are descriptive and succinct. They should provide further clarity for the user.
  • Labels should not end in punctuation.
  • Use Sentence case for labels.
  • Avoid using negative language as it can be counterintuitive. For example, "I agree to the terms" instead of "I don't agree to the terms."
  • Long labels may wrap to a second line, but consider rewording the label if it gets too long.
  • Labels should not be truncated.
States Default

Indicates that the switch is interactable.

Switch label
Disabled

Indicates that the switch should not be interactable.

Switch label
Checked

Indicates that the switch is selected and will submit a checked value of true.

Switch label
Unchecked

Indicates that the switch is not selected and will submit an unchecked value of false.

Switch label
Accessibility Relevant WCAG guidelines
  • 4.1.2 Name, Role, Value A
Importance

Switches help users to understand the relationship between selections in a form element or filter. A switch grouping also will typically allow users to select more than one item in the grouping.

Code expectations
  • The switch has the role "switch".
  • When the switch is selected, the ARIA state is set to aria-checked="true" and when it is deselected aria-checked="false".
Expected actions Screen reader
  • Reads: "item name, state (checked or unchecked), switch, group"
Keyboard
  • The Space key can be used to select and deselect each switch when it has focus.
  • Users can navigate between switch inputs by pressing Tab or Shift-Tab.
  • Switches identified as disabled attribute are ignored in the tab order.