Switch

Switch is the sliding on/off toggle for a single boolean setting that takes effect immediately. It is built on Radix Switch, so it is keyboard accessible and controllable, and it pairs with a Label for its text. Reach for it when flipping the control should change something right away, like enabling notifications or airplane mode.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: switch.tsx

import { Switch, Label } from "@beacon/design-system";

// Pair the switch with a Label via matching id / htmlFor.
<div className="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>

// On by default, and disabled variants.
<Switch id="notifications" defaultChecked />
<Switch id="disabled-switch" disabled />

Props

Switch forwards the props of the Radix Switch.Root and forwards its ref. The most commonly set props:

Prop	Type	Default	Description
checked	boolean	—	Controlled on/off state.
defaultChecked	boolean	—	Uncontrolled initial state.
onCheckedChange	(checked: boolean) => void	—	Fires when the state changes.
disabled	boolean	false	Disables the switch and dims it.
id	string	—	Associates the switch with a Label via htmlFor.
className	string	—	Extra classes merged onto the control.

When to use

• A single boolean setting that takes effect immediately (notifications, airplane mode, feature toggles).
• Settings panels and preference rows where the action is instant, not deferred to a submit.

Do not use Switch for a yes/no choice that is only saved when a form is submitted; use a Checkbox instead. For choosing one option from several, use a Radio Group.