---
name: tree
category: data
summary: "Nested list with expand/collapse and tri-state checkboxes"
subpath: "@42/core/tree"
---

Nested list with expand/collapse, checkbox tri-state, keyboard nav.

```html
<ul data-c42-tree>
  <li data-c42-tree-node data-value="root">
    <button data-c42-tree-toggle>▸</button>
    <input data-c42-tree-checkbox type="checkbox" /> Root
    <ul data-c42-tree-children>
      <li data-c42-tree-node data-value="child1">
        <input data-c42-tree-checkbox type="checkbox" /> Child 1
      </li>
    </ul>
  </li>
</ul>
```

```ts
import { Tree } from '@42/core/tree';
new Tree(root, { expandAll: false, treeSelection: true });
```

Options: `expandAll`, `treeSelection`
Events: `tree:change` → `{ values: string[] }`, `tree:toggle`