eo-n/ui

Switch

Toggles an option on or off.

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

Installation

npx shadcn@latest add @eo-n/switch

Usage

Import all parts and piece them together.

import { Switch } from "@/components/ui/switch";
<Switch />

Examples

Disabled

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
 
export function SwitchDisabled() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="allow-tracking" disabled />
      <Label htmlFor="allow-tracking">Allow Tracking</Label>
    </div>
  );
}

Square

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
 
export function SwitchSmall() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" variant="square" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  );
}

Large

import { Switch } from "@/components/ui/switch";
 
export function SwitchLarge() {
  return <Switch size="lg" />;
}

Small

import { Switch } from "@/components/ui/switch";
 
export function SwitchSmall() {
  return <Switch size="sm" />;
}