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" />;
}