# Checkbox

- Page: <https://kznlabs.github.io/labsUI/components/checkbox>

## Checkbox (`checkbox`, component)

Native checkbox with a spring-drawn check mark and an indeterminate state for select-all rows. Controlled or uncontrolled; submits with forms.

- Install: `npx @kznlabs/labsui add checkbox`
- Docs: <https://kznlabs.github.io/labsUI/components/checkbox>
- Brings: field, label, use-controllable-state, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Checkbox>` (+ <input> props): Native checkbox with a spring-drawn check. Controlled or uncontrolled; works inside <Field>.
  - `checked?: boolean`: Controlled state; pair with `onCheckedChange`.
  - `defaultChecked?: boolean` = `false`: State at first render (uncontrolled).
  - `indeterminate?: boolean` = `false`: Mixed state, e.g. a "select all" with some rows selected. Shows a dash.
  - `onCheckedChange?: (checked: boolean) => void`: Called with the new state.

### Usage

```tsx
<Checkbox id="all" checked={all} indeterminate={some} onCheckedChange={toggleAll} />
```

### Example: select-all.tsx

```tsx
"use client";

import { useState } from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function SelectAll({ items }: { items: string[] }) {
  const [on, setOn] = useState<string[]>([]);
  const all = on.length === items.length;
  return (
    <div className="flex items-center gap-2.5">
      <Checkbox id="all" checked={all} indeterminate={on.length > 0 && !all} onCheckedChange={() => setOn(all ? [] : items)} />
      <Label htmlFor="all">Select all</Label>
    </div>
  );
}
```