Tree View

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeTreeViewExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeTreeViewExample/></NativeScope>}

Controlled and data-driven

Keep expansion and selection in your own state with expandedKeys and selectedKeys. Use TreeViewCollection to recursively render nested data. Every item needs a unique, stable id.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="tree-view" id="controlled"/>}

Multiple selection

Set selectionMode="multiple" to toggle items independently. Hold Shift to select a range with the keyboard. Single selection is the default; use selectionMode="none" with onAction for an action-only tree.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="tree-view" id="multiple-selection"/>}

Sizes, icons, and states

Use size="sm" for compact rows and showGuides={false} to hide guide lines. Branches get folder icons automatically; pass a Remix Icon component to icon or expandedIcon to customize them. Disabled items prevent interaction, and renderEmptyState supplies an empty message.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="tree-view" id="sizes-and-states"/>}

Right-to-left

Set the locale with DirectionProvider. Indentation, guide lines, disclosure icons, and horizontal keyboard navigation follow the reading direction.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="tree-view" id="rtl"/>}

Keyboard navigation

Tab into the tree, then use Up and Down to move through visible items. Right expands a branch or moves to its first child; Left collapses it or returns to its parent. Home and End jump to the first and last visible items. Type a label to find it, and press Space to select.