Switch

Turns a setting on or off, with an immediate effect. When the change waits for a Save button, use a Checkbox.

Installation

npx rasengan-ui add switch

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/switch.json

Usage

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
 
export function Notifications() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="notifications" defaultChecked />
      <Label htmlFor="notifications">Notifications</Label>
    </div>
  );
}

Tones

tone colours the checked track, and the thumb takes the text colour that sits on it: primary by default, or neutral, success, warning, info, destructive. The thumb, at 4.5:1 on the track, is what shows the state.

Sizes

sm, default and lg; the thumb's travel follows the size and the village's border.

Villages

The track and thumb are village tokens (--switch-track, --switch-thumb, --track-border): Iwa borders its track and draws its thumb in ink, without a shadow.

Accessibility

• A role="switch" button with aria-checked, backed by a hidden input for forms.
• Space and Enter toggle it; a linked label toggles it on click.

API reference

The props of Base UI's Switch root (checked, defaultChecked, onCheckedChange, name, required, disabled…), plus:

switchVariants({ tone, size }) returns the track's classes.