Switch

"use client";

import { Label } from "@/registry/base/ui/label";
import { Switch } from "@/registry/base/ui/switch";

export default function Switch01() {
  return (
    <div className="flex items-center justify-between gap-4">
      <div className="flex flex-col gap-0.5">
        <Label htmlFor="switch-01-marketing">Marketing emails</Label>
        <span className="text-xs text-muted-foreground">
          Get occasional updates about new features and offers.
        </span>
      </div>
      <Switch id="switch-01-marketing" />
    </div>
  );
}

"use client";

import { Label } from "@/registry/base/ui/label";
import { Switch } from "@/registry/base/ui/switch";

const settings = [
  {
    id: "switch-02-wifi",
    label: "Wi-Fi",
    description: "Connect to available wireless networks automatically.",
    defaultChecked: true,
  },
  {
    id: "switch-02-bluetooth",
    label: "Bluetooth",
    description: "Allow this device to pair with nearby accessories.",
    defaultChecked: false,
  },
  {
    id: "switch-02-location",
    label: "Location services",
    description: "Share your location with apps that request it.",
    defaultChecked: false,
  },
];

export default function Switch02() {
  return (
    <div className="flex w-full max-w-sm flex-col divide-y divide-border rounded-lg border border-border">
      {settings.map((setting) => (
        <div key={setting.id} className="flex items-start justify-between gap-4 px-4 py-3">
          <div className="flex flex-col gap-0.5">
            <Label htmlFor={setting.id}>{setting.label}</Label>
            <span className="text-xs text-muted-foreground">{setting.description}</span>
          </div>
          <Switch id={setting.id} defaultChecked={setting.defaultChecked} />
        </div>
      ))}
    </div>
  );
}

"use client";

import { Button } from "@/registry/base/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/base/ui/card";
import { Label } from "@/registry/base/ui/label";
import { Switch } from "@/registry/base/ui/switch";

const consents = [
  {
    id: "switch-03-analytics",
    label: "Usage analytics",
    description: "Help us improve the product with anonymous usage data.",
    defaultChecked: true,
  },
  {
    id: "switch-03-cookies",
    label: "Marketing cookies",
    description: "Allow cookies that personalize ads across sites.",
    defaultChecked: false,
  },
];

export default function Switch03() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Privacy consent</CardTitle>
        <CardDescription>Control how your data is used.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        {consents.map((consent) => (
          <div key={consent.id} className="flex items-start justify-between gap-4">
            <div className="flex flex-col gap-0.5">
              <Label htmlFor={consent.id}>{consent.label}</Label>
              <span className="text-xs text-muted-foreground">{consent.description}</span>
            </div>
            <Switch id={consent.id} defaultChecked={consent.defaultChecked} />
          </div>
        ))}
      </CardContent>
      <CardFooter className="justify-end">
        <Button size="sm">Save preferences</Button>
      </CardFooter>
    </Card>
  );
}

"use client";

import { Label } from "@/registry/base/ui/label";
import { Switch } from "@/registry/base/ui/switch";

export default function Switch04() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Switch id="switch-04-off" disabled />
        <Label htmlFor="switch-04-off">Disabled, off</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="switch-04-on" disabled defaultChecked />
        <Label htmlFor="switch-04-on">Disabled, on</Label>
      </div>
    </div>
  );
}