# Checklist

Complete a set of real tasks and see how much remains.

- Family: Content, imported from `mizu-ui` or `mizu-ui/content`
- Docs: https://mizu.user64bit.world/components/checklist
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/content/Checklist.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { Checklist } from "mizu-ui";

export function Example() {
  const [items, setItems] = useState([
    { id: "types", label: "Check types", checked: true },
    {
      id: "browser",
      label: "Review in the browser",
      description: "Include a narrow screen and keyboard navigation.",
      checked: false,
    },
    { id: "package", label: "Install mizu-ui", checked: false },
  ]);
  return (
    <Checklist
      label="Release checks"
      items={items}
      onChange={(id, checked) =>
        setItems(items.map((i) => (i.id === id ? { ...i, checked } : i)))
      }
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/checklist
```

## Props

- `items`: `ChecklistItem[]`. Stable id, label, description, checked and disabled.
- `onChange`: `(id: string, checked: boolean) => void`. Persist or update each task.
- `label`: `string`. Checklist legend.

## Accessibility

Native fieldset/checkboxes with linked descriptions. Count is derived from supplied state; no automatic completion.

## Motion

State changes remain stable; no layout travel.