#TreeView

The interactive hierarchy: rows that expand, select and disable, with the connector rails drawn for you. Reach for Tree when you only need to show nesting — this one is for working in it. Rows are composed freely, so an icon, a badge or a checkbox is just a child, and nested TreeViewItems become the subtree.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';
import { FileText, Folder } from '@wallarm-org/design-system/icons';
import { Input } from '@wallarm-org/design-system/Input';
import { TreeView, TreeViewItem } from '@wallarm-org/design-system/TreeView';

#Examples

#Nested

Nested items become the collapsible subtree, which is also what marks the parent as a branch. Branches start closed.

#With checkboxes

The tree has no checkbox logic: the checkbox is a child, the checked set is yours, and the click has to be stopped from reaching row selection.

#Selectable

selectable (with multiSelect for more than one) turns rows into a selection, controlled through selectedIds or left to the component.

#With inline badge

A badge beside the label, for a count that belongs to the row rather than to its children.

#With trailing content

The label is flex-1, so anything after it lands against the right edge — which is how a count or a tag ends up trailing without any prop for it.

#Disabled

A disabled row dims and stops responding to everything: toggle, selection and checkbox alike.

#With header and search

The toolbar is assembled from Text, Button and Input — there is no TreeView toolbar. Expand-all drives the items’ controlled open state, and the search keeps ancestors of matches and opens them.

#Props

#TreeViewItem