Navigation

TreeView

A hierarchical collection with expansion, selection, and keyboard navigation.

TreeViewView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

source
- ui
  - Button.tsx
  - Input.tsx
  - Legacy.tsx
- App.tsx
public
README.md

tsx

import { TreeView } from "innate-ui";

export function TreeViewDemo() {
  return (
    <TreeView ariaLabel="Project files" defaultExpanded={["source", "ui"]}>
      <TreeView.Item value="source" label="source">
        <TreeView.Item value="ui" label="ui">
          <TreeView.Item value="button" label="Button.tsx" />
          <TreeView.Item value="input" label="Input.tsx" />
          <TreeView.Item value="legacy" label="Legacy.tsx" disabled />
        </TreeView.Item>
        <TreeView.Item value="app" label="App.tsx" />
      </TreeView.Item>
      <TreeView.Item value="public" label="public">
        <TreeView.Item value="favicon" label="favicon.svg" />
      </TreeView.Item>
      <TreeView.Item value="readme" label="README.md" />
    </TreeView>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

TreeViewProps

Prop	Type	Default
`children`required Top-level `TreeView.Item` children.	`JSX.Children`	`—`
`ariaLabel`required Accessible label for the tree.	`JSX.ValueOrCell<string>`	`—`
`expanded` Externally owned reactive set of expanded item values.	`SourceCell<ReadonlySet<TreeViewValue>>`	`—`
`defaultExpanded` Initial expanded values used when `expanded` is not supplied.	`Iterable<TreeViewValue>`	`—`
`onExpandedChange` Called whenever the expanded set changes.	`(expanded: ReadonlySet<TreeViewValue>) => void`	`—`
`onClick` Click handler called before built-in tree click handling.	`EventHandlerProp<HTMLUListElement, MouseEvent>`	`—`
`onFocus` Focus handler called before built-in focus management.	`EventHandlerProp<HTMLUListElement, FocusEvent>`	`—`
`onKeyDown` Key-down handler called before built-in tree keyboard navigation.	`EventHandlerProp<HTMLUListElement, KeyboardEvent>`	`—`

TreeViewItemProps

Prop	Type	Default
`value`required Unique value identifying this item in the tree.	`TreeViewValue`	`—`
`label`required Visible item label.	`JSX.Children`	`—`
`children` Nested `TreeView.Item` children.	`JSX.Children`	`—`
`disabled` Whether the item is disabled.	`JSX.ValueOrCell<boolean>`	`false`
`textValue` Text used for typeahead when it cannot be inferred from `label`.	`JSX.ValueOrCell<string>`	`—`
`hasChildren` Marks an item as expandable even when its children are loaded asynchronously.	`JSX.ValueOrCell<boolean>`	`false`
`loading` Whether the item's children are currently loading.	`JSX.ValueOrCell<boolean>`	`false`

Inspect the typed source →