Switch

npx shadcn@latest add https://ui.saasflare.io/r/switch.json

pnpm add @saasflare/ui

"use client"import { Label, Switch } from "@saasflare/ui"/** A switch toggle paired with a label. */export function Demo() {    return (        <div className="flex items-center gap-2">            <Switch id="2fa" defaultChecked />            <Label htmlFor="2fa">Require two-factor authentication</Label>        </div>    )}

"use client"import { useState } from "react"import { Label, Switch } from "@saasflare/ui"/** A controlled switch reflecting its on/off state. */export function Demo() {    const [enabled, setEnabled] = useState(false)    return (        <div className="flex flex-col gap-2">            <div className="flex items-center gap-2">                <Switch id="maintenance" checked={enabled} onCheckedChange={setEnabled} />                <Label htmlFor="maintenance">Maintenance mode</Label>            </div>            <p className="text-sm text-muted-foreground">                {enabled ? "Site is offline for visitors." : "Site is live."}            </p>        </div>    )}

"use client"import { Label, Switch } from "@saasflare/ui"/** The small and default switch sizes. */export function Demo() {    return (        <div className="flex flex-col gap-3">            <div className="flex items-center gap-2">                <Switch id="compact-sm" size="sm" defaultChecked />                <Label htmlFor="compact-sm">Compact density (sm)</Label>            </div>            <div className="flex items-center gap-2">                <Switch id="compact-default" size="md" defaultChecked />                <Label htmlFor="compact-default">Comfortable density (default)</Label>            </div>        </div>    )}