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
Checkbox
Checkboxes present items in a list of one or more options where the user can have several different combinations of selections.
Example
I am a checkbox

See live code examples in Storybook
Usage

The checkbox component is used to provide multiple options the user can select, including all or none. They work independently from each other, therefore checking an additional box does not affect the other selections. Checkboxes are not mutually exclusive.

Alignment

Labels for checkboxes are placed to the right of the checkbox. If there's a checkbox group, the options can be vertically or horizontally stacked, depending on the use case and UI needs. Vertically stacking the checkboxes is preferable for better readability.

Placement

Checkboxes in JSTOR are often used when faceting results so users can narrow their focus, or on forms. They can be placed within pages or modals.

Best practices
Dos
  • Use checkboxes when users need to choose "yes" or "no" per option
  • Checkboxes should work independently from each other, unless there are checkboxes to control groups
  • Checkboxes should always include a label
  • Use checkboxes when choices are not mutually exclusive
  • The list of choices should be in a logical order
Don'ts
  • Don't use checkboxes 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 checkboxes affect other checkboxes unless for bulk selection actions
Content guidelines Group labels (optional)
  • For a grouping of checkboxes, you can include a heading to provide even greater clarity. This is especially helpful if there multiple groups on a page, form or experience.
  • Use Sentence case for group labels.
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.
Variants isOnBackground

In cases where the background containing the checkbox will be a dark color or, in cases where the theme of the page/component would be dark, use the isOnBackground variant checkbox.

Checkbox label
States Default

Indicates that the checkbox is interactable.

Checkbox label
Disabled

Indicates that the checkbox should not be interactable.

Checkbox label
Required

Indicates that the user must specify a value for the input before the form can be submitted.

Checkbox label
Error

Indicates that an error occurred within the checkbox.

Checkbox label
Checked

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

Checkbox label
Unchecked

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

Checkbox label
Indeterminate

A state that serves a visual purpose while masking the actual value of the checkbox.

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

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

Code expectations
  • The checkbox has the role "checkbox".
  • When the checkbox is selected, the ARIA state is set to aria-checked="true" and when it is deselected aria-checked="false".
  • Provide a fieldset that surrounds the entire grouping of checkboxes. Also, provide a legend, which is a description for the grouping. Here's an example.
  • Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of checkboxes
Expected actions Screen reader
  • Reads: "item name, state (checked or unchecked), checkbox, fieldset name, group"
Keyboard
  • The Space key can be used to select and deselect each checkbox when it has focus.
  • Users can navigate between checkbox inputs by pressing Tab or Shift-Tab.
  • Checkboxes identified as disabled attribute are ignored in the tab order.