Switch

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

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

import * as React from "react"

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export default function SwitchControlledDemo() {
  const [checked, setChecked] = React.useState(true)

  return (
    <div className="flex items-center gap-3">
      <Switch
        id="switch-notifications"
        checked={checked}
        onCheckedChange={setChecked}
      />
      <Label htmlFor="switch-notifications">
        Notifications {checked ? "on" : "off"}
      </Label>
    </div>
  )
}

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

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

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

const settings = [
  { id: "marketing", label: "Marketing emails", defaultChecked: true },
  { id: "security", label: "Security alerts", defaultChecked: true },
  { id: "digest", label: "Weekly digest", defaultChecked: false },
]

export default function SwitchSettingsDemo() {
  return (
    <div className="flex w-[320px] flex-col gap-4">
      {settings.map((setting) => (
        <div key={setting.id} className="flex items-center justify-between">
          <Label htmlFor={`switch-${setting.id}`}>{setting.label}</Label>
          <Switch
            id={`switch-${setting.id}`}
            defaultChecked={setting.defaultChecked}
          />
        </div>
      ))}
    </div>
  )
}