Switch

While pressed, the thumb stretches toward the side it is about to travel to, then slides there (200ms). Under reduced motion it jumps; the track color still shows the state.

Installation

$npx shadcn@latest add @reziui/switch

Usage

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane mode</Label>
    </div>
  );
}

Use a switch for settings that take effect at once. For a choice that is only applied when a form is submitted, use a Checkbox.

Examples

States

Place the Label after the switch: it fades with a disabled switch on its own (peer-disabled). Label the switch for what happens when it is on.

Keyboard

API reference

Switch forwards every prop of Radix Switch.Root — checked, defaultChecked, onCheckedChange, disabled, required, name and value. It renders its own thumb; pass no children.

The off track uses the --control-off token, which clears 3:1 against the page and the thumb in both themes.