Balance Logo
Reckon Design System
Open playroom


Checkboxes are used in forms when a user needs to select multiple values from several options.
pnpm add @balance-web/checkbox
Import usage
import {
} from '@balance-web/checkbox';
  • Code
  • API

Checkboxes provide users with a range of options for a given statement where the user may select any number of choices, including zero, one or multiple. In a form, always place checkboxes underneath each other to aid in a user’s ability to scan the form.


The Checkbox component maps to a checkbox input and a label. The label is provided as children to the component. If you need custom label behaviour use the CheckboxPrimitive component.

Edit in Playroom


The Checkbox component passes on the original event through the onChange handler. Use the event target's checked property to get the latest value and update state accordingly.


The Checkbox is available in a "small" size. Reserve this appearance for data-rich, dense interfaces.


  • Avoid checkboxes with actions that are the opposite of what the user expects.
  • The default view for checkboxes has no option selected.
  • Checkbox options should be listed in a logical order (alphabetical, numerical, time-based, etc).


Use the CheckboxGroup to implement a group of checkboxes. Each Checkbox within a group must have a "value" prop.


Use the CheckboxPrimitive to implement custom behaviours and appearances.

Indeterminate state

The indeterminate state of a checkbox input element is controlled by JavaScript, not HTML attribution. To make things more declarative and less confusing Balance checkboxes accept a "tri-state"; the checked value for a checkbox may be true | false | 'mixed', where "mixed" indicates an indeterminate state aligning with the aria-checked attribute.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo