Balance Logo
Balance
Reckon Design System

Checkbox

Checkboxes are used in forms when a user needs to select multiple values from several options.
Install
pnpm add @reckon-web/checkbox
Import usage
import {
CheckboxPrimitive,
Checkbox
} from '@reckon-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.

Usage

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.

Open in Playroom

Controlled

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.

Guidelines

  • 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).

Primitive

Use the CheckboxPrimitive to implement custom behaviours and appearances.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.