Balance Logo
Balance
Reckon Design System

Toggle

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

Usage

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

Controlled

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 © 2021 Reckon. Designed and developed in partnership with Thinkmill.