Skip to content

Checkbox

Checkboxes allow users to enable and disable options.

Overview

Checkboxes should be used whenever a yes/no or on/off option is required, or when there are multiple options that can all be selected at the same time.

Usage

Note that CheckboxField expects Checkbox elements as its direct children in order to set the correct error properties.

Content

Copy for individual inputs in checkbox groups are in semibold for consistency. Because they sit in a hierarchy below the group labels.

Only ask for information that is definitely needed, don’t mark fields as ‘required’, instead use ‘optional’.

Hint Text

Checkboxes have two options for adding hint text.

  • Text that appears below the group label should be relevant to the entire group
  • Text below the select item should be relevant to that item only.

Accessibility

Labels

Checkbox groups need a group label, which should always sit aligned above it. This label allows users to understand what to enter as well as auto focussing the input which creates a larger touch target.

Errors

  • Avoid default HTML form validation
  • Avoid validation while typing
  • Always validate and show error messages once the form has been submitted

Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.

For standalone checkboxes, error messages should appear above the checkbox.

Variations

Standalone Checkbox

There are times when a group label is not needed – a standalone checkbox for example. In these cases, make sure copy is concise so the checkbox makes sense.

Theme examples

Smaller checkboxes

Due to the complexity of styling checkbox inputs we have provided an example theme override to reduce the checkbox size.

Note that the paddingTop (used align the text with the checkbox) and the marginTop (used to put space between sibling checkboxes) can take a single value or an array or responsive values - this is useful when aligning text that changes size across breakpoints.

Properties

Checkbox Field

NameValuesDefault

label (required)

String

optional

Boolean

false

hint

ReactNode

error

ReactNode

checked

Boolean

...

JSX.IntrinsicElements["div"]

Checkbox

NameValuesDefault

id (required)

String

label (required)

ReactNode

optional

Boolean

false

hint

ReactNode

error

ReactNode

...

JSX.IntrinsicElements["input"]

Tokens