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

How can I reduce my carbon footprint? (optional)

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.

How can I reduce my carbon footprint?Select at least one

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

You must agree in order to recieve more information

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.

Properties

Checkbox Field

NameValuesDefault

label (required)

String

optional

Boolean

false

hint

ReactNode

error

ReactNode

checkedRequired for React Native

Boolean

...

JSX.IntrinsicElements["div"]

Checkbox

NameValuesDefault

id (required)

String

label (required)

ReactNode

optional

Boolean

false

hint

ReactNode

error

ReactNode

...

JSX.IntrinsicElements["input"]

Tokens