Default and standard spacing for checkboxes.
Compact spacing for checkboxes.
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.
Custom styles for checkboxes.
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
- 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: