Checkbox

import { Checkbox } from "@araf-ds/core"

export default function Example() {
  return (
    <Checkbox label="Accept terms and conditions" />
  )
}

<Checkbox label="Accept terms and conditions" />

<Checkbox label="Subscribe to newsletter" defaultChecked />

<Checkbox
  label="Enable notifications"
  description="Receive email updates about your account activity."
  defaultChecked
/>

<Checkbox label="Admin access" disabled />
<Checkbox label="Super admin" disabled defaultChecked />

const [items, setItems] = useState([true, false, false]);
const allChecked = items.every(Boolean);
const someChecked = items.some(Boolean) && !allChecked;

<Checkbox
  checked={allChecked ? true : someChecked ? "indeterminate" : false}
  onCheckedChange={(checked) => setItems(items.map(() => !!checked))}
  label="Select all"
/>

const options = ["Design", "Engineering", "Product"];
const [selected, setSelected] = useState<string[]>(["Design"]);

const toggle = (val: string) =>
  setSelected((prev) =>
    prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val]
  );

<div className="flex flex-col gap-3">
  {options.map((opt) => (
    <Checkbox
      key={opt}
      label={opt}
      checked={selected.includes(opt)}
      onCheckedChange={() => toggle(opt)}
    />
  ))}
</div>