# Tree: Disabled

> A disabled item can’t be selected, checked or opened, and the arrow keys skip it. Items inside a disabled branch are disabled too.

Example: https://hextaui.com/docs/tree/examples/disabled
Component docs: https://hextaui.com/docs/tree.md

## Add this example

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

This adds `components/examples/tree/disabled.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tree/disabled.tsx"
import { IconFile, IconFolder, IconLock } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

export function TreeDisabled() {
  return (
    <Tree
      aria-label="Shared drive"
      defaultExpandedValues={["team"]}
      className="w-full max-w-xs"
    >
      <TreeItem value="team">
        <TreeItemLabel icon={<IconFolder />}>Team</TreeItemLabel>
        <TreeGroup>
          <TreeItem value="roadmap">
            <TreeItemLabel icon={<IconFile />}>roadmap.md</TreeItemLabel>
          </TreeItem>
          <TreeItem value="salaries" disabled>
            <TreeItemLabel icon={<IconLock />}>salaries.xlsx</TreeItemLabel>
          </TreeItem>
          <TreeItem value="notes">
            <TreeItemLabel icon={<IconFile />}>notes.md</TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
      <TreeItem value="archive" disabled>
        <TreeItemLabel icon={<IconLock />}>Archive</TreeItemLabel>
        <TreeGroup>
          <TreeItem value="2024">
            <TreeItemLabel icon={<IconFile />}>2024.zip</TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
    </Tree>
  )
}
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultExpandedValues` | `string[]` | – |  |

### TreeItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Required. Unique within the tree. |
| `disabled` | `boolean` | `false` |  |

### TreeItemLabel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `ReactNode` | – | Shown before the label. |

## More Tree examples

- [Indent guides](https://hextaui.com/docs/tree/examples/lines.md)
- [Connectors](https://hextaui.com/docs/tree/examples/connectors.md)
- [Checkboxes](https://hextaui.com/docs/tree/examples/checkboxes.md)
- [Navigation](https://hextaui.com/docs/tree/examples/navigation.md)
- [Multiple selection](https://hextaui.com/docs/tree/examples/multiple.md)
- [Controlled](https://hextaui.com/docs/tree/examples/controlled.md)
- [Lazy loading](https://hextaui.com/docs/tree/examples/lazy.md)
- [Small](https://hextaui.com/docs/tree/examples/small.md)
- [Long names](https://hextaui.com/docs/tree/examples/long-names.md)
- [Right to left](https://hextaui.com/docs/tree/examples/rtl.md)