Checkbox

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox";

import { Checkbox } from "@/components/ui/checkbox";

export function Example() {
  return (
    <Checkbox
      label="Accept terms and conditions"
      caption="By clicking this checkbox, you agree to the terms and conditions."
    />
  );
}

Checkbox                          (single checkbox — pass label/caption as props)
├── label={<ReactNode>}            (auto-emits a <Label htmlFor={id}>)
├── caption={<ReactNode>}          (helper text stacked under the label)
├── variant="disclaimer"           (disclaimer layout: label → caption → left-aligned "I agree" → error)
├── strikeWhenChecked              (line-through label when checked — todo affordance)
├── size="sm" | "default" | "lg"   (box size; disclaimer defaults to "lg")
├── required / error               (red asterisk + error message; required only renders in disclaimer)
└── ...rest                        (checked / defaultChecked / onCheckedChange / disabled / id / className)

CheckboxGroup                     (list-shape — one Checkbox per option)
├── options={[{ value, label, caption?, disabled? }]}
├── value / defaultValue / onValueChange   (controlled or uncontrolled string[])
├── variant="vertical" | "horizontal" | "badge"   (default: "vertical")
├── label / caption / required / error
└── size / disabled / itemClassName

Pass any custom layout by mapping <Checkbox> yourself; CheckboxGroup is a
convenience for the three common shapes.