• Toggle For settings that do not require a form submission.
  • RadioGroup For single select.
Follows the WAI-ARIA Checkbox Pattern, supporting both dual-state and tri-state specifications.
A message is typically used to communicate the status of a field, such as an error message. This will be announced on focus of the field and can be combined with a tone to illustrate its purpose.
The supported tones are: "critical" and "neutral".
Critical message
Neutral message
Additional context can be provided with a description. This will display below the field label and also be announced by a screen reader when the field is focused.
Extra information about the field
You can customise the size of the checkbox via the size prop, which accepts either standard or small.
A Checkbox can be marked as disabled by passing true to the disabled prop.
Add a Badge alongside the field label using the badge prop.
Nesting content inside of a Checkbox will both align the content with the field label, and toggle it’s visibility based on the checked state.
A Checkbox can be used to represent the value of a group of checkboxes, presenting as:
  • checked, when the entire group is checked,
  • unchecked, when the entire group is unchecked, or
  • mixed, when the group has some of each.
For mixed state checkboxes, you can set the checked prop to "mixed", or provide an array of checked values (e.g. [true, false, false]) to calculate the tri-state value.
For cases where a Checkbox needs to be used without a form field style label, you can use the CheckboxStandalone component.
To maintain accessibility, it is required to provide either a aria-label or aria-labelledby property, to describe the field’s intent.