Data

Tree

Tree view with expand/collapse, single or multiple selection, cascading checkboxes and full WAI-ARIA keyboard navigation over visible nodes.

Import

import { Tree } from "@zephora/react";

Examples

Basic selection

src
- components
- index.ts
docs
package.json

const data: TreeNode[] = [
  {
    key: "src",
    label: "src",
    children: [
      {
        key: "components",
        label: "components",
        children: [
          { key: "button", label: "Button.tsx" },
          { key: "input", label: "Input.tsx" },
        ],
      },
      { key: "index", label: "index.ts" },
    ],
  },
  { key: "package", label: "package.json", disabled: true },
];

<Tree data={data} defaultExpandedKeys={["src"]} defaultSelectedKeys={["index"]} />

Cascading checkboxes

With `checkable`, Enter/Space toggles the check instead of selecting. Checking a parent cascades to the whole subtree.

src
- components
  - Button.tsx
  - Input.tsx
- index.ts
docs
package.json

Checked: 0

const [checked, setChecked] = React.useState<string[]>([]);

<Tree
  data={data}
  checkable
  defaultExpandedKeys={["src", "components"]}
  checkedKeys={checked}
  onCheckedChange={setChecked}
/>

Multiple selection

`multiple` toggles nodes in and out of the selection on activate.

src
- components
  - Button.tsx
  - Input.tsx
- index.ts
docs
package.json

<Tree data={data} multiple defaultExpandedKeys={["src", "components"]} />

API

Tree props

Prop	Type	Default	Description
`data` *	`TreeNode[]`	—	Nodes: `{ key, label, children?, disabled?, icon? }`, nested via `children`.
`expandedKeys / defaultExpandedKeys / onExpandedChange`	`string[] / string[] / (keys: string[]) => void`	—	Controlled and uncontrolled expanded node keys.
`selectedKeys / defaultSelectedKeys / onSelectedChange`	`string[] / string[] / (keys: string[]) => void`	—	Controlled and uncontrolled selected node keys.
`multiple`	`boolean`	`false`	Allow multiple selection (toggle on activate).
`checkable`	`boolean`	`false`	Show checkboxes; Enter/Space toggles the check instead of selecting.
`checkedKeys / defaultCheckedKeys / onCheckedChange`	`string[] / string[] / (keys: string[]) => void`	—	Checked node keys. Checking a parent cascades down its subtree.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Keyboard

Key	Action
`ArrowDown / ArrowUp`	Move focus to the next / previous visible node.
`ArrowRight`	Expands a collapsed branch; on an expanded branch moves into the first child.
`ArrowLeft`	Collapses an expanded branch; otherwise moves focus to the parent node.
`Home / End`	Move focus to the first / last visible node.
`Enter / Space`	Selects the node — or toggles its checkbox when `checkable` is set.