Balance Logo
Reckon Design System
Open playroom


Use the toggle to let a user quickly toggle between two states.
pnpm add @balance-web/toggle
Import usage
import {
} from '@balance-web/toggle';
  • Code
  • API

Toggle is similar to a two-option radio group in function but is used for quickly switching between binary actions. Toggle must always be accompanied by a label, and follows the same keyboard workflow as a checkbox.


  • Checkbox — For boolean values in forms.
  • Radio — For binary choices in forms.


A control used to quickly switch between two possible states. Toggles are only for binary actions that occur immediately after the user “flips” the toggle switch.

Do not use in forms — or other workflows that have "submit" behaviour.

Edit in Playroom


The toggle is a controlled component, you must provide a checked state and onChange handler.

A11y text

You may change the accessibility text, provided to screen readers, based on the context of the toggle. The default text is on/off.

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