Toggle

Toggle switches are used for binary on/off settings. They provide immediate visual feedback and support controlled/uncontrolled modes.

Toggle Container Playground

Preview

Code

Email notificationsReceive updates about your account

Controls

Size:

Small

Medium

Large

Style:

Default

Pill

Supporting:

Disabled:

Toggle Label Playground

Preview

Code

Dark modeEnable dark theme across the app

Controls

Size:

Small

Medium

Large

Style:

Default

Pill

Supporting:

Disabled:

Toggle Playground

Preview

Code

Controls

Style:

Default

Pill

Size:

Small

Medium

Large

Disabled:

Installation

You can add the toggle component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @react-aria/focus @react-aria/interactions @react-aria/utils

Copy and paste the following code into your project.

Toggle.tsx

ToggleContainer.tsx

ToggleLabel.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { Toggle } from '@versaui/ui/components/Toggle';

// Basic toggle
<Toggle />

// Controlled toggle
<Toggle checked={isOn} onChange={setIsOn} />

Styles

Two styles are available — default and pill:

<Toggle style="default" />
<Toggle style="pill" />

Sizes

Three sizes — small, medium, and large:

<Toggle size="large" />
<Toggle size="medium" />
<Toggle size="small" />

Toggle with Label

Use ToggleLabel to pair a toggle with a label and optional supporting text:

import { ToggleLabel } from '@versaui/ui/components/Toggle';

<ToggleLabel
  label="Dark mode"
  supportingText="Enable dark theme across the app"
/>

Toggle Container

Use ToggleContainer for a boxed layout with title and description:

import { ToggleContainer } from '@versaui/ui/components/Toggle';

<ToggleContainer
  title="Email notifications"
  supportingText="Receive updates about your account"
/>

Disabled

<Toggle disabled />
<ToggleLabel label="Disabled" disabled />
<ToggleContainer title="Disabled" disabled />

Accessibility

Uses role="switch" with proper aria-checked
Keyboard operable with Space to toggle
Focus ring visible on keyboard focus
Label association for screen readers

ToggleContainer Props

Prop	Type	Default	Description
`title`	`string`	`-`	Container title text.
`supportingText`	`string`	`-`	Description text below title.
`size`	`'large' \| 'medium' \| 'small'`	`'medium'`	Toggle size.
`toggleStyle`	`'default' \| 'pill'`	`'default'`	Toggle shape style.
`checked`	`boolean`	`false`	Controlled checked state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(checked: boolean) => void`	`-`	Called when toggle state changes.

ToggleLabel Props

Prop	Type	Default	Description
`label`	`string`	`-`	Label text next to toggle.
`supportingText`	`string`	`-`	Helper text below the label.
`size`	`'large' \| 'medium' \| 'small'`	`'medium'`	Toggle size.
`toggleStyle`	`'default' \| 'pill'`	`'default'`	Toggle shape style.
`checked`	`boolean`	`false`	Controlled checked state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(checked: boolean) => void`	`-`	Called when toggle state changes.

Toggle Props

Prop	Type	Default	Description
`style`	`'default' \| 'pill'`	`'default'`	Toggle shape style.
`size`	`'large' \| 'medium' \| 'small'`	`'large'`	Toggle size.
`checked`	`boolean`	`false`	Controlled checked state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(checked: boolean) => void`	`-`	Called when toggle state changes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page