Balance Logo
Reckon Design System


Use the toggle to let a user quickly toggle between two states.
pnpm add @reckon-web/toggle
Import usage
import {
} from '@reckon-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.


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

For user input that will be submitted as part of a form use the Checkbox and Radio components, as applicable.

Open 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 © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo