Tree

Tree displays hierarchical data in an expandable and collapsible structure. It supports keyboard navigation, selection, and accessible tree patterns for file browsers, org charts, and nested data.

Import

import { Tree, TreeItem } from '@proyecto-viviana/solid-spectrum';

Basic Tree View

A file system tree with expand/collapse functionality. Click the arrow icons to expand or collapse folders.

src

components

Button.tsx

Dialog.tsx

Menu.tsx

hooks

index.ts

tests

package.json

tsconfig.json

<Tree
  aria-label="File system"
  items={fileSystemData}
  expandedKeys={expandedKeys()}
  onExpandedChange={setExpandedKeys}
>
  {(item) => (
    <TreeItem id={item.key!} textValue={item.textValue}>
      {item.value!.name}
    </TreeItem>
  )}
</Tree>

With Selection

Enable selection mode to allow users to select tree items. Selected items are tracked and displayed below the tree.

CEO - Maria Garcia

CTO - James Chen

Frontend Lead - Anna Lee

Backend Lead - Omar Hassan

Infra Lead - Kenji Tanaka

CFO - Sarah Miller

Accounting - David Park

Finance - Lisa Wong

CMO - Robert Taylor

Marketing - Emily Davis

Sales - Michael Brown

Selected: None

<Tree
  aria-label="Organization chart"
  items={orgChartData}
  selectionMode="multiple"
  selectedKeys={selectedKeys()}
  onSelectionChange={setSelectedKeys}
>
  {(item) => (
    <TreeItem id={item.key!} textValue={item.textValue}>
      {item.value!.name}
    </TreeItem>
  )}
</Tree>

Tree Props

Props

Prop	Type	Default	Description
`items`	T[]	—	The data items rendered as tree nodes
`selectionMode`	'none' \| 'single' \| 'multiple'	`'none'`	How tree items can be selected
`selectedKeys`	Set<Key> \| 'all'	—	Currently selected item keys (controlled)
`onSelectionChange`	(keys: Set<Key> \| 'all') => void	—	Handler called when selection changes
`expandedKeys`	Set<Key>	—	Currently expanded item keys (controlled)
`onExpandedChange`	(keys: Set<Key>) => void	—	Handler called when expanded state changes
`defaultExpandedKeys`	Set<Key>	—	Default expanded keys (uncontrolled)
`aria-label`	string	—	Accessible label for the tree

TreeItem Props

Props

Prop	Type	Default	Description
`id`	string	—	Unique identifier for the tree item
`textValue`	string	—	Text value for typeahead and accessibility
`children`	JSX.Element \| ((renderProps) => JSX.Element)	—	Content of the tree item, or a render function for custom content
`icon`	() => JSX.Element	—	Optional icon to display before the content
`description`	string	—	Optional description text below the label

Accessibility

Uses role="tree" and role="treeitem" ARIA patterns
Arrow keys navigate between visible tree items
Left arrow collapses an expanded node or moves to parent
Right arrow expands a collapsed node or moves to first child
Home/End keys jump to first/last visible item
Type-ahead search to quickly find items by text
aria-expanded state is announced for expandable items
Selection state is communicated via aria-selected
Nested level is exposed via aria-level