Switch

A control that allows the user to toggle between checked and not checked.

Airplane Mode

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/switch.json

Usage

Use switches for binary settings. Pair with a label via htmlFor matching the switch id.

import { Switch } from "@/components/switch/switch";

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

Supports size (default | sm), controlled checked / onCheckedChange, disabled, and aria-invalid. Built on Base UI Switch.