Switch

'use client';

import { Label } from '@/registry/san-francisco/ui/label';
import { Switch } from '@/registry/san-francisco/ui/switch';

export default function SwitchDemo() {
  return (
    <div className="flex items-center justify-between gap-4">
      <Label htmlFor="switch-demo">Airplane mode</Label>
      <Switch id="switch-demo" />
    </div>
  );
}

'use client';

import { Label } from '@/registry/san-francisco/ui/label';
import { Switch } from '@/registry/san-francisco/ui/switch';

export default function SwitchDemoSizes() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between gap-4">
        <Label htmlFor="switch-sm">Small</Label>
        <Switch id="switch-sm" size="sm" />
      </div>
      <div className="flex items-center justify-between gap-4">
        <Label htmlFor="switch-default">Default</Label>
        <Switch id="switch-default" size="default" />
      </div>
    </div>
  );
}

'use client';

import { Label } from '@/registry/san-francisco/ui/label';
import { Switch } from '@/registry/san-francisco/ui/switch';

export default function SwitchDemoStates() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between gap-4">
        <Label htmlFor="switch-on">Notifications</Label>
        <Switch id="switch-on" defaultChecked />
      </div>
      <div className="flex items-center justify-between gap-4">
        <Label htmlFor="switch-disabled" className="text-muted-foreground">
          Disabled
        </Label>
        <Switch id="switch-disabled" disabled />
      </div>
    </div>
  );
}