Tree

Nested items that open and close, with selection, checkboxes, or links.

import { Tree, CheckboxTree, FileTree } from 'components/UI/Tree'

Basic

Use this for nested items, such as folders or categories. Pass items as data: each has an id, a label, and an optional icon and children. Set selectionMode to let users select items.

Product analytics

Trends

Funnels

Retention

Session replay

Feature flags

Experiments

Checkbox tree

Use CheckboxTree to pick many items from a nested list. A parent checks or clears all of its children, and shows a dash when only some are checked. The value has only leaf ids.

Events

$pageview

$pageleave

$autocapture

Person properties

plan

$initial_referrer

Checked: pageview, email

File tree

Use FileTree for files or for page navigation. It shows folder and file icons. An item with an href is a link. Pass currentId to mark the current page.

components

Tree Tabs Menu

docs

README.md

Sizes

Use md (the default) in most places and sm in dense UI, such as a sidebar. The sizes match the list items in Select and Combobox.

sm · dense UI

src

components

Tree.tsx

index.ts

md · default

src

components

Tree.tsx

index.ts

src

components

Tree.tsx

index.ts

Controlled

Pass expanded and onExpandedChange, or selected and onSelectedChange, to keep the state in your component.

Dashboards

Insights

Selected: none

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Use the arrow keys to move and to open or close a row. Home and End go to the first and last rows, * opens all siblings, and a letter goes to the next row that starts with it.
The tree has one tab stop. Do not put buttons or links inside a row. Use renderRow to make the row itself a link, as FileTree does.
A group with more than 100 children opens and closes at once, without the height animation.
Give the tree an aria-label or an aria-labelledby.

API

Base UI has no tree, so this component is our own. It follows the WAI-ARIA tree view pattern. CheckboxTree and FileTree are both made from Tree. Each group of children opens and closes as one Collapsible panel.

Tree

Prop	Type	Default	Description
items	TreeNode[]	–	The data. Each node has id, label, and optional icon, textValue, disabled, and children.
size	'sm' \| 'md' \| 'lg'	'md'	The row height, text size, indent, and icon size.
selectionMode	'none' \| 'single' \| 'multiple'	'none'	With none, a click on a parent row opens or closes it.
expanded / defaultExpanded	string[]	–	The ids of the open rows. Use onExpandedChange with expanded.
selected / defaultSelected	string[]	–	The ids of the selected rows. Use onSelectedChange with selected.
onAction	(item) => void	–	Runs on click, Enter, and Space. When you set it, a click on a parent row does not open it.
renderItem	(item, state) => ReactNode	item.label	The content of a row, after the chevron.
renderRow	(item, props, state) => ReactElement	A div	The row element. Spread props onto it to keep focus, keys, and ARIA.

CheckboxTree

Prop	Type	Default	Description
checked / defaultChecked	string[]	–	The ids of the checked rows. Use onCheckedChange with checked.
strict	boolean	false	Checks each row alone. A parent does not change its children.

FileTree

Prop	Type	Default	Description
items	FileTreeNode[]	–	Like TreeNode, with an optional href. Rows without an icon get a folder or file icon.
currentId	string	–	The id of the current page. Its row gets aria-current, and its folders start open.