Checkbox

import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'
import { Checkbox } from '@/components/ui/checkbox'

export function CheckboxWithText() {
  return (
    <Field orientation="horizontal" className="max-w-sm">
      <Checkbox id="digital-mailbox" defaultChecked />
      <FieldContent>
        <FieldLabel htmlFor="digital-mailbox">Send decisions to my digital mailbox</FieldLabel>
        <FieldDescription>
          Decisions and letters from the municipality arrive digitally instead of by post. You can change this at any time
          under My pages.
        </FieldDescription>
      </FieldContent>
    </Field>
  )
}

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/components/ui/field'
import { Checkbox } from '@/components/ui/checkbox'

const HOME_HELP_SERVICES = [
  { id: 'service-shopping', label: 'Grocery shopping', checked: true },
  { id: 'service-cleaning', label: 'Cleaning', checked: true },
  { id: 'service-laundry', label: 'Laundry', checked: false },
  { id: 'service-accompaniment', label: 'Accompaniment to appointments', checked: false },
  { id: 'service-safety-alarm', label: 'Personal safety alarm', checked: false },
]

export function CheckboxGroup() {
  return (
    <FieldSet className="w-full max-w-xs">
      <FieldLegend variant="label">Which home help services do you need?</FieldLegend>
      <FieldDescription>Select all that apply. A needs assessor will go through them with you.</FieldDescription>
      <FieldGroup className="gap-3">
        {HOME_HELP_SERVICES.map((service) => (
          <Field key={service.id} orientation="horizontal">
            <Checkbox id={service.id} defaultChecked={service.checked} />
            <FieldLabel htmlFor={service.id} className="font-normal">
              {service.label}
            </FieldLabel>
          </Field>
        ))}
      </FieldGroup>
    </FieldSet>
  )
}

import * as React from 'react'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'

const CASES = [
  { id: '2026-04812', title: 'Building permit, carport', address: 'Storgatan 14' },
  { id: '2026-04815', title: 'Demolition notice', address: 'Kungsgatan 3' },
  { id: '2026-04821', title: 'Sign permit', address: 'Torggatan 7' },
  { id: '2026-04830', title: 'Extension, single-family home', address: 'Björkvägen 22' },
]

export function CheckboxSelectAll() {
  const [selected, setSelected] = React.useState<string[]>(['2026-04812', '2026-04821'])
  const allChecked = selected.length === CASES.length
  const someChecked = selected.length > 0 && !allChecked

  return (
    <Card className="w-full max-w-md gap-0 py-0">
      <div className="flex items-center gap-3 border-b bg-muted/50 px-4 py-3">
        <Checkbox
          id="select-all-cases"
          checked={allChecked}
          indeterminate={someChecked}
          onCheckedChange={(checked) => setSelected(checked ? CASES.map((c) => c.id) : [])}
        />
        <Label htmlFor="select-all-cases" className="flex-1">
          Unassigned cases
        </Label>
        <span className="text-xs text-muted-foreground">{selected.length} selected</span>
      </div>
      <ul className="divide-y">
        {CASES.map((item) => {
          const id = `case-${item.id}`
          return (
            <li key={item.id} className="flex items-start gap-3 px-4 py-3">
              <Checkbox
                id={id}
                className="mt-0.5"
                checked={selected.includes(item.id)}
                onCheckedChange={(checked) =>
                  setSelected((current) => (checked ? [...current, item.id] : current.filter((value) => value !== item.id)))
                }
              />
              <Label htmlFor={id} className="flex flex-1 flex-col items-start gap-0.5 font-normal">
                <span className="font-medium">{item.title}</span>
                <span className="text-muted-foreground">
                  {item.id} · {item.address}
                </span>
              </Label>
            </li>
          )
        })}
      </ul>
      <div className="flex justify-end border-t px-4 py-3">
        <Button size="sm" disabled={selected.length === 0}>
          Assign to me
        </Button>
      </div>
    </Card>
  )
}

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
  FieldTitle,
} from '@/components/ui/field'
import { Checkbox } from '@/components/ui/checkbox'

const CHANNELS = [
  { id: 'channel-mailbox', title: 'Digital mailbox', description: 'Decisions and official letters', checked: true },
  { id: 'channel-email', title: 'Email', description: 'Receipts and reminders', checked: true },
  { id: 'channel-sms', title: 'Text message', description: 'Changes to waste collection days', checked: false },
]

export function CheckboxChoiceCard() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">How should we contact you?</FieldLegend>
      <FieldGroup className="gap-3">
        {CHANNELS.map((channel) => (
          <FieldLabel key={channel.id} htmlFor={channel.id}>
            <Field orientation="horizontal">
              <Checkbox id={channel.id} defaultChecked={channel.checked} />
              <FieldContent>
                <FieldTitle>{channel.title}</FieldTitle>
                <FieldDescription>{channel.description}</FieldDescription>
              </FieldContent>
            </Field>
          </FieldLabel>
        ))}
      </FieldGroup>
    </FieldSet>
  )
}

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

export function CheckboxDisabled() {
  return (
    <FieldGroup className="w-sm max-w-full gap-3">
      <Field orientation="horizontal" data-disabled="true">
        <Checkbox id="extra-pickup" disabled />
        <FieldContent>
          <FieldLabel htmlFor="extra-pickup">Extra garden waste pick-up</FieldLabel>
          <FieldDescription>Not available at your address until the new season starts on 1 April 2026.</FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal" data-disabled="true">
        <Checkbox id="standard-pickup" disabled defaultChecked />
        <FieldContent>
          <FieldLabel htmlFor="standard-pickup">Household waste, every other week</FieldLabel>
          <FieldDescription>Included in your subscription and can't be removed.</FieldDescription>
        </FieldContent>
      </Field>
    </FieldGroup>
  )
}

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
import { Checkbox } from '@/components/ui/checkbox'

export function CheckboxReadOnly() {
  return (
    <Card className="w-sm max-w-full">
      <CardHeader>
        <CardTitle>Submitted consents</CardTitle>
        <CardDescription>Application 2026-03307 · sent 12 February 2026</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup className="gap-3">
          <Field orientation="horizontal">
            <Checkbox id="read-only-share" readOnly defaultChecked />
            <FieldLabel htmlFor="read-only-share" className="font-normal">
              Share my details with the school health service
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="read-only-photo" readOnly />
            <FieldLabel htmlFor="read-only-photo" className="font-normal">
              Allow photos of my child on the school website
            </FieldLabel>
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}

import { Field, FieldContent, FieldError, FieldLabel } from '@/components/ui/field'
import { Checkbox } from '@/components/ui/checkbox'

export function CheckboxInvalid() {
  return (
    <Field orientation="horizontal" data-invalid="true" className="max-w-sm">
      <Checkbox id="invalid-consent" aria-invalid aria-describedby="invalid-consent-error" />
      <FieldContent>
        <FieldLabel htmlFor="invalid-consent">I have read how the municipality handles my personal data</FieldLabel>
        <FieldError id="invalid-consent-error">You need to confirm this before you can submit.</FieldError>
      </FieldContent>
    </Field>
  )
}

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'
import { Separator } from '@/components/ui/separator'
import { Checkbox } from '@/components/ui/checkbox'

export function CheckboxFormExample() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Resident parking permit</CardTitle>
        <CardDescription>Zone C · Storgatan 14, valid 1 May 2026 – 30 April 2027</CardDescription>
      </CardHeader>
      <CardContent>
        <form id="parking-permit-form" className="flex flex-col gap-4" onSubmit={(event) => event.preventDefault()}>
          <Field orientation="horizontal">
            <Checkbox id="permit-registered" defaultChecked />
            <FieldContent>
              <FieldLabel htmlFor="permit-registered">The vehicle is registered to me</FieldLabel>
              <FieldDescription>Or I have it on a leasing or company car agreement.</FieldDescription>
            </FieldContent>
          </Field>
          <Separator />
          <Field orientation="horizontal">
            <Checkbox id="permit-renew" />
            <FieldContent>
              <FieldLabel htmlFor="permit-renew" className="gap-2">
                Renew automatically
                <Badge variant="secondary">New</Badge>
              </FieldLabel>
              <FieldDescription>We send a reminder 30 days before the permit is renewed.</FieldDescription>
            </FieldContent>
          </Field>
        </form>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="outline">Save draft</Button>
        <Button type="submit" form="parking-permit-form">
          Apply
        </Button>
      </CardFooter>
    </Card>
  )
}