Switch

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

export function SwitchSizes() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Switch id="switch-size-sm" size="sm" defaultChecked />
        <Label htmlFor="switch-size-sm">Compact – for dense tables and toolbars</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="switch-size-default" size="default" defaultChecked />
        <Label htmlFor="switch-size-default">Default – for forms and settings</Label>
      </div>
    </div>
  )
}

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

export function SwitchHorizontal() {
  return (
    <div className="flex flex-wrap items-center gap-x-6 gap-y-3 rounded-lg border px-4 py-3">
      <span className="text-sm font-medium">Case list</span>
      <div className="flex items-center gap-2">
        <Switch size="sm" id="switch-only-mine" defaultChecked />
        <Label htmlFor="switch-only-mine">Only my cases</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch size="sm" id="switch-show-closed" />
        <Label htmlFor="switch-show-closed">Show closed</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch size="sm" id="switch-overdue" />
        <Label htmlFor="switch-overdue">Overdue first</Label>
      </div>
    </div>
  )
}

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from '@/components/ui/field'
import { Switch } from '@/components/ui/switch'

export function SwitchDisabled() {
  return (
    <FieldGroup className="w-sm max-w-full">
      <Field orientation="horizontal" data-disabled="true">
        <FieldContent>
          <FieldLabel htmlFor="switch-digital-mailbox">Digital mailbox</FieldLabel>
          <FieldDescription>
            Decisions are always sent to your digital mailbox. Contact the service desk to change this.
          </FieldDescription>
        </FieldContent>
        <Switch id="switch-digital-mailbox" checked disabled />
      </Field>
      <Field orientation="horizontal" data-disabled="true">
        <FieldContent>
          <FieldLabel htmlFor="switch-paper-copy">Paper copy by post</FieldLabel>
          <FieldDescription>Not available for your municipality.</FieldDescription>
        </FieldContent>
        <Switch id="switch-paper-copy" disabled />
      </Field>
    </FieldGroup>
  )
}

import * as React from 'react'
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldLabel,
} from '@/components/ui/field'
import { Switch } from '@/components/ui/switch'

export function SwitchInvalid() {
  const [confirmed, setConfirmed] = React.useState(false)
  return (
    <Field orientation="horizontal" className="w-full max-w-sm" data-invalid={!confirmed}>
      <FieldContent>
        <FieldLabel htmlFor="switch-confirm">I confirm the information is correct</FieldLabel>
        {confirmed ? (
          <FieldDescription>Thank you. You can now submit the application.</FieldDescription>
        ) : (
          <FieldError>You need to confirm before submitting the application.</FieldError>
        )}
      </FieldContent>
      <Switch
        id="switch-confirm"
        checked={confirmed}
        onCheckedChange={setConfirmed}
        aria-invalid={!confirmed}
      />
    </Field>
  )
}

import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'
import { Switch } from '@/components/ui/switch'

export function SwitchWithDescription() {
  return (
    <Field orientation="horizontal" className="w-full max-w-sm">
      <FieldContent>
        <FieldLabel htmlFor="switch-share-guardian">Share with the other guardian</FieldLabel>
        <FieldDescription>
          Both guardians can follow the school placement application and receive the decision.
        </FieldDescription>
      </FieldContent>
      <Switch id="switch-share-guardian" defaultChecked />
    </Field>
  )
}

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from '@/components/ui/field'
import { Switch } from '@/components/ui/switch'

export function SwitchChoiceCard() {
  return (
    <FieldGroup className="w-sm max-w-full gap-3">
      {[
        {
          id: 'switch-card-meals',
          title: 'Meal delivery',
          description: 'Lunch delivered Monday to Friday, 11:00–12:30.',
          checked: true,
        },
        {
          id: 'switch-card-alarm',
          title: 'Safety alarm',
          description: 'A wrist alarm connected to the home help team around the clock.',
          checked: true,
        },
        {
          id: 'switch-card-escort',
          title: 'Escort service',
          description: 'Company for walks, errands and appointments, up to 8 hours a month.',
          checked: false,
        },
      ].map((service) => (
        <FieldLabel key={service.id} htmlFor={service.id}>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldTitle>{service.title}</FieldTitle>
              <FieldDescription>{service.description}</FieldDescription>
            </FieldContent>
            <Switch id={service.id} defaultChecked={service.checked} />
          </Field>
        </FieldLabel>
      ))}
    </FieldGroup>
  )
}

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from '@/components/ui/field'
import { Switch } from '@/components/ui/switch'

export function SwitchSettings() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>Choose how we contact you about your cases and bookings.</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="switch-notify-decisions">Decisions</FieldLabel>
              <FieldDescription>When a decision is made in one of your cases.</FieldDescription>
            </FieldContent>
            <Switch id="switch-notify-decisions" defaultChecked />
          </Field>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="switch-notify-requests">Requests for information</FieldLabel>
              <FieldDescription>When a case handler needs more documents from you.</FieldDescription>
            </FieldContent>
            <Switch id="switch-notify-requests" defaultChecked />
          </Field>
          <FieldSeparator />
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="switch-notify-waste">Waste collection</FieldLabel>
              <FieldDescription>The evening before collection at Storgatan 14.</FieldDescription>
            </FieldContent>
            <Switch id="switch-notify-waste" />
          </Field>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="switch-notify-disruptions">Water and road disruptions</FieldLabel>
              <FieldDescription>Planned work and outages near your address.</FieldDescription>
            </FieldContent>
            <Switch id="switch-notify-disruptions" />
          </Field>
        </FieldGroup>
      </CardContent>
      <CardFooter className="justify-end">
        <Button>Save preferences</Button>
      </CardFooter>
    </Card>
  )
}