# Tree (UI SDK): Checkboxes

> Add `checkable` and a `TreeItemCheckbox` in each label. Checking a branch checks everything in it, and a partly checked branch shows a dash.

Canonical: https://hextaui.com/docs/ui-sdk-tree/examples/checkboxes

Component docs: https://hextaui.com/docs/ui-sdk-tree

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-tree-checkboxes.json
```

This adds `components/examples/ui-sdk-tree/checkboxes.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-tree/checkboxes.tsx"
"use client"

import * as React from "react"

import {
  Tree,
  TreeGroup,
  TreeItem,
  TreeItemCheckbox,
  TreeItemIndicator,
  TreeItemLabel,
  type TreeItemData,
} from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "frontend",
    label: "Frontend",
    children: [
      { value: "react", label: "React" },
      { value: "vue", label: "Vue" },
      { value: "svelte", label: "Svelte" },
    ],
  },
  {
    value: "backend",
    label: "Backend",
    children: [
      { value: "node", label: "Node" },
      {
        value: "databases",
        label: "Databases",
        children: [
          { value: "postgres", label: "Postgres" },
          { value: "sqlite", label: "SQLite" },
        ],
      },
    ],
  },
]

function Items({ items }: { items: TreeItemData[] }) {
  return items.map((item) => (
    <TreeItem key={item.value} value={item.value}>
      <TreeItemLabel>
        {item.children && <TreeItemIndicator />}
        <TreeItemCheckbox />
        <span>{item.label}</span>
      </TreeItemLabel>
      {item.children && (
        <TreeGroup>
          <Items items={item.children} />
        </TreeGroup>
      )}
    </TreeItem>
  ))
}

function UiSdkTreeCheckboxes() {
  const [checked, setChecked] = React.useState(["react", "postgres"])

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Tree
        aria-label="Stack"
        items={items}
        mode="none"
        checkable
        checked={checked}
        onCheckedChange={setChecked}
        defaultExpanded={["frontend", "backend", "databases"]}
      >
        <Items items={items} />
      </Tree>
      <p className="text-sm text-muted-foreground">
        {checked.length > 0 ? checked.join(", ") : "Nothing checked"}
      </p>
    </div>
  )
}

export { UiSdkTreeCheckboxes }
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `TreeItemData[]` | – | The whole hierarchy. Without children, the tree renders styled rows from it. |
| `mode` | `"single" \| "multiple" \| "none"` | `"single"` |  |
| `defaultExpanded` | `string[]` | – |  |
| `checkable` | `boolean` | `false` |  |
| `checked` | `string[]` | – |  |
| `onCheckedChange` | `(checked, details) => void` | – |  |

### TreeItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Unique in the tree. |

## More Tree examples

- [Items as data](https://hextaui.com/docs/ui-sdk-tree/examples/data)
- [File paths](https://hextaui.com/docs/ui-sdk-tree/examples/paths)
- [Multiple selection](https://hextaui.com/docs/ui-sdk-tree/examples/multiple)
- [Navigation](https://hextaui.com/docs/ui-sdk-tree/examples/links)
- [Loading children](https://hextaui.com/docs/ui-sdk-tree/examples/lazy)
- [Lines and small size](https://hextaui.com/docs/ui-sdk-tree/examples/lines)
- [Controller](https://hextaui.com/docs/ui-sdk-tree/examples/controller)
- [Find in page](https://hextaui.com/docs/ui-sdk-tree/examples/find-in-page)
- [Disabled](https://hextaui.com/docs/ui-sdk-tree/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-tree/examples/rtl)