## Checkbox Tree (S—093)

Grouped checkboxes with a parent that goes indeterminate, a tick that draws itself and collapsible groups.

- URL: https://sundaeui.dev/components/checkbox-tree
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/checkbox-tree.json`
- Tags: tree, checkbox, form, permissions, indeterminate, select-all

Each group has a parent checkbox that reflects its children: empty, a dash when some are on, a tick when all are. Clicking the parent selects or clears the whole group.
Groups collapse with a chevron, and the tick strokes draw in rather than appear.

### Usage

```tsx
import { CheckboxTree } from '@/components/sundae/checkbox-tree'

<CheckboxTree />
```

### Props

- `groups` (`{ id: string; label: string; items: { id: string; label: string }[] }[]`, required): Groups.
- `value / defaultValue` (`string[]`): Checked item ids.
- `onValueChange` (`(ids: string[]) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Permissions, notification types, export field pickers, filter panels.

### When not to use

- Deep trees: use a tree view with lazy loading.

### Accessibility

- Native checkboxes; parents use the indeterminate property and aria-checked="mixed".
- Group toggles are buttons with aria-expanded.
- Reduced motion removes the movement and keeps every state change.