Switch

Overview

The Switch component is a toggle for binary on/off settings. Built on Radix UI with spring animation via Framer Motion. Supports labels, descriptions, two sizes, and configurable label position.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add switch

pnpm dlx @work-rjkashyap/unified-ui add switch

npx @work-rjkashyap/unified-ui add switch

bunx @work-rjkashyap/unified-ui add switch

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { Switch } from "@work-rjkashyap/unified-ui";

Examples

Basic Usage

Notifications

Dark mode

Sizes

Small switch

Medium switch (default)

Label Position

Right label (default)

Left label

<Switch label="Right label (default)" labelPosition="right" />
<Switch label="Left label" labelPosition="left" />

<Switch label="Right label (default)" labelPosition="right" /><Switch label="Left label" labelPosition="left" />

With Description

Push notifications

Marketing emails

Disabled State

Disabled off

Disabled on

Settings Pattern

Email notifications

Push notifications

SMS notifications

Marketing emails

<div className="divide-y divide-border-muted border border-border rounded-md">
<div className="p-4">
  <Switch
    label="Email notifications"
    defaultChecked
  />
</div>
<div className="p-4">
  <Switch
    label="Push notifications"
    defaultChecked
  />
</div>
<div className="p-4">
  <Switch
    label="SMS notifications"
  />
</div>
<div className="p-4">
  <Switch
    label="Marketing emails"
  />
</div>
</div>

<div className="divide-y divide-border-muted border border-border rounded-md"><div className="p-4">  <Switch    label="Email notifications"    defaultChecked  /></div><div className="p-4">  <Switch    label="Push notifications"    defaultChecked  /></div><div className="p-4">  <Switch    label="SMS notifications"  /></div><div className="p-4">  <Switch    label="Marketing emails"  /></div></div>

Controlled

Use checked and onCheckedChange to control the switch state externally.

const [enabled, setEnabled] = useState(false);

<Switch label="Dark mode" checked={enabled} onCheckedChange={setEnabled} />;

Without Label

When used without a label, provide an aria-label for accessibility.

<Switch aria-label="Toggle dark mode" />

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md"`	`"md"`	Size of the switch.
`label`	`ReactNode`	—	Label text displayed next to the switch.
`labelPosition`	`"left" \| "right"`	`"right"`	Position of the label relative to the track.
`description`	`ReactNode`	—	Description text below the label.
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	—	Default checked state (uncontrolled).
`onCheckedChange`	`(checked: boolean) => void`	—	Callback when the checked state changes.
`disabled`	`boolean`	`false`	Disables the switch.
`required`	`boolean`	`false`	Whether the switch is required in a form.
`name`	`string`	—	Form field name for native form submission.
`value`	`string`	—	Value submitted with the form.
`className`	`string`	—	Additional CSS classes.

Accessibility

Built on Radix UI Switch primitive for full keyboard and screen reader support.
Toggle with Space or Enter keys.
aria-checked state is managed automatically by Radix.
When no visible label is provided, you must supply an aria-label.
The label is clickable — clicking it toggles the switch.
Description text is linked to the switch via aria-describedby.
Focus ring is visible on keyboard navigation only (focus-visible).
Disabled state sets both the disabled attribute and reduces opacity.
Spring animation on the thumb respects prefers-reduced-motion via useReducedMotion.