BRAID
Braid Logo
 

Checkbox

Open in Playroom

Alternatives

  • Toggle — For settings that do not require a form submission.
  • RadioGroup — For single select.

Accessibility

Follows the WAI-ARIA Checkbox Pattern, supporting both dual-state and tri-state specifications.

Message and tone

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

Field description

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

Sizes

You can customise the size of the checkbox via the size prop, which accepts either standard or small.
Open in Playroom

Disabled field

A Checkbox can be marked as disabled by passing true to the disabled prop.
Open in Playroom

Badge support

Add a Badge alongside the field label using the badge prop.
Positive
Open in Playroom

Toggling nested content

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

Tri-state support

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

Standalone

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