Checkbox

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

export default function CheckboxDemo() {
  return (
    <FieldGroup className="w-64 gap-3">
      <Field orientation="horizontal">
        <Checkbox id="demo-mentions" defaultChecked />
        <FieldLabel htmlFor="demo-mentions" className="font-normal">
          Wzmianki i odpowiedzi
        </FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Checkbox id="demo-assigned" defaultChecked />
        <FieldLabel htmlFor="demo-assigned" className="font-normal">
          Zgłoszenia przypisane do mnie
        </FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Checkbox id="demo-digest" />
        <FieldLabel htmlFor="demo-digest" className="font-normal">
          Cotygodniowe podsumowanie
        </FieldLabel>
      </Field>
    </FieldGroup>
  )
}

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

export default function CheckboxDescription() {
  return (
    <Field orientation="horizontal" className="max-w-sm">
      <Checkbox id="terms" defaultChecked />
      <FieldContent>
        <FieldLabel htmlFor="terms">Akceptuję regulamin</FieldLabel>
        <FieldDescription>
          Kontynuując, akceptujesz nasz Regulamin i potwierdzasz zapoznanie się z Polityką prywatności.
        </FieldDescription>
      </FieldContent>
    </Field>
  )
}

"use client"

import * as React from "react"

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

const permissions = [
  { id: "read", label: "Odczyt zawartości repozytorium" },
  { id: "write", label: "Wypychanie commitów i otwieranie pull requestów" },
  { id: "admin", label: "Zarządzanie ustawieniami i webhookami" },
]

export default function CheckboxIndeterminate() {
  const [granted, setGranted] = React.useState<string[]>(["read"])
  const all = granted.length === permissions.length
  const some = granted.length > 0 && !all

  return (
    <FieldGroup className="w-80 gap-3">
      <Field orientation="horizontal">
        <Checkbox
          id="permissions-all"
          checked={all}
          indeterminate={some}
          onCheckedChange={(checked) =>
            setGranted(checked ? permissions.map((p) => p.id) : [])
          }
        />
        <FieldLabel htmlFor="permissions-all">Wszystkie uprawnienia</FieldLabel>
      </Field>
      <div className="ml-2 flex flex-col gap-3 border-l pl-5">
        {permissions.map((permission) => (
          <Field key={permission.id} orientation="horizontal">
            <Checkbox
              id={`permission-${permission.id}`}
              checked={granted.includes(permission.id)}
              onCheckedChange={(checked) =>
                setGranted((current) =>
                  checked
                    ? [...current, permission.id]
                    : current.filter((id) => id !== permission.id)
                )
              }
            />
            <FieldLabel
              htmlFor={`permission-${permission.id}`}
              className="font-normal"
            >
              {permission.label}
            </FieldLabel>
          </Field>
        ))}
      </div>
    </FieldGroup>
  )
}

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

export default function CheckboxStates() {
  return (
    <FieldGroup className="w-80 gap-4">
      <Field orientation="horizontal" data-disabled>
        <Checkbox id="state-disabled" disabled />
        <FieldLabel htmlFor="state-disabled" className="font-normal">
          Wyłączone
        </FieldLabel>
      </Field>
      <Field orientation="horizontal" data-disabled>
        <Checkbox id="state-disabled-checked" disabled defaultChecked />
        <FieldLabel htmlFor="state-disabled-checked" className="font-normal">
          Wyłączone i zaznaczone
        </FieldLabel>
      </Field>
      <Field orientation="horizontal" data-invalid>
        <Checkbox id="state-invalid" aria-invalid required />
        <FieldContent>
          <FieldLabel htmlFor="state-invalid">
            Akceptuję warunki przetwarzania danych
          </FieldLabel>
          <FieldError>Aby kontynuować, musisz zaakceptować warunki.</FieldError>
        </FieldContent>
      </Field>
    </FieldGroup>
  )
}

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

const addons = [
  {
    id: "backups",
    title: "Codzienne kopie zapasowe",
    description: "Przywracanie do dowolnego momentu z ostatnich 30 dni.",
    price: "+12 $/mies.",
    checked: true,
  },
  {
    id: "analytics",
    title: "Analityka witryny",
    description: "Raporty ruchu i konwersji z poszanowaniem prywatności.",
    price: "+$9/mo",
    checked: false,
  },
]

export default function CheckboxChoiceCard() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {addons.map((addon) => (
        <FieldLabel key={addon.id} htmlFor={`addon-${addon.id}`}>
          <Field orientation="horizontal">
            <Checkbox id={`addon-${addon.id}`} defaultChecked={addon.checked} />
            <FieldContent>
              <FieldTitle>{addon.title}</FieldTitle>
              <FieldDescription>{addon.description}</FieldDescription>
            </FieldContent>
            <span className="text-sm font-medium text-foreground tabular-nums">
              {addon.price}
            </span>
          </Field>
        </FieldLabel>
      ))}
    </div>
  )
}

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

const events = [
  { id: "deploy-succeeded", label: "Wdrożenie się powiedzie", checked: false },
  { id: "deploy-failed", label: "Wdrożenie się nie powiedzie", checked: true },
  { id: "domain-expiring", label: "Domena wkrótce wygaśnie", checked: true },
  { id: "usage-limit", label: "Wykorzystanie osiągnie limit", checked: true },
]

export default function CheckboxFieldset() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Wyślij mi e-mail, gdy</FieldLegend>
      <FieldDescription>
        Na każde zdarzenie wysyłamy najwyżej jeden e-mail na godzinę.
      </FieldDescription>
      <FieldGroup data-slot="checkbox-group" className="gap-3">
        {events.map((event) => (
          <Field key={event.id} orientation="horizontal">
            <Checkbox
              id={event.id}
              name="events"
              value={event.id}
              defaultChecked={event.checked}
            />
            <FieldLabel htmlFor={event.id} className="font-normal">
              {event.label}
            </FieldLabel>
          </Field>
        ))}
      </FieldGroup>
    </FieldSet>
  )
}