Checkbox

View Storybook

A checkbox is an input control that allows users to select zero, one, or more options from a number of choices.

Classes

Class Applies to Description
.d-checkbox-group N/A Checkbox's parent wrapper.
.d-checkbox__input N/A Wraps checkbox's input.
.d-checkbox N/A Styles checkbox's input.
.d-checkbox__copy N/A Wraps checkbox's label.
.d-checkbox__label N/A Styles checkbox's label.
.d-checkbox-group--disabled .d-checkbox-group Styles checkbox group in a disabled state.
.d-checkbox--error .d-checkbox Styles checkbox's input in an error state.
.d-checkbox--success .d-checkbox Styles checkbox's input in a success state.
.d-checkbox--warning .d-checkbox Styles checkbox's input in a warning state.
.d-checkbox--indeterminate .d-checkbox Styles checkbox's input in an indeterminate state.
.d-validation-message N/A Applies base styles to checkbox's validation message.
.d-validation-message--error .d-validation-message Styles radio's validation message in an error state.
.d-validation-message--success .d-validation-message Styles radio's validation message in a success state.
.d-validation-message--warning .d-validation-message Styles radio's validation message in a warning state.

Examples

Base Styles

Indeterminate

Stacked Group

With Description Text

With Validation States

Accessibility

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they’re correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:

  • All inputs should have an id attribute.
  • Associate checkbox labels with their inputs using the for attribute. This correlates with the checkbox's id.
  • If you have a group of related checkboxes, use a fieldset to group them and a legend to title the group.

For further information, please visit Gov.UK’s article, "Using the fieldset and legend elements".