Open in Playroom
  • 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
Open in Playroom
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
Open in Playroom
You can customise the size of the checkbox via the size prop, which accepts either standard or small.
Open in Playroom
A Checkbox can be marked as disabled by passing true to the disabled prop.
Open in Playroom
Add a Badge alongside the field label using the badge prop.
Open in Playroom
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.
Open in Playroom
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.
Open in Playroom
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.
Open in Playroom