Checkboxes

Permits user to make one or more selections from a list

Default

Default and standard spacing for checkboxes.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Compact

Compact spacing for checkboxes.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Indeterminate

Displays status for checkbox group by indicating that some of the sub-selections in a list are selected. Provides user with ability to select or unselect all items in the list’s sub-group.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Custom

Custom styles for checkboxes.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Each checkbox must be focusable and keyboard accessible:
    • When the checkbox has focus, the Space key changes the selection
    • Tab key moves to next element in list
  • Fieldsets (or grouped checkboxes) should be:
    • Used when associating group of checkboxes
    • Identified or described as a group using a <legend> tag
  • Avoid nested fieldsets
  • Single checkboxes:
    • May be interchangeable with a toggle
    • Write labels to be self-explanatory
  • Custom checkboxes maintain accessibility requirements. The checkbox icon is only visually hidden and replaced with custom style

This component has compliance with WCAG guidelines by:

  • Wrapping the input in a label element and label is automatically associated with it

For more information, review techniques and failures for: