Tree View

Basic

Sizes

• TreeView supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Disabled

• TreeView can be disabled by setting disabled prop to true in component TreeView.

• A specific TreeItem can be disabled by setting disabled prop to true in component TreeItem.
• If a TreeItem is disabled, all its children will be disabled.

Variants

• TreeView supports 2 variants default and branch-line and can be changed by passing the variant prop.
• Default variant is default.

Prefix - Suffix

• TreeItem supports prefix and suffix props to add content before and after the label.

Controlled open state

• TreeItem supports defaultOpen prop to set the initial open state of the branch.
• Default value is true.

• TreeItem supports open and onOpenChange props to control the open state of the branch.

Selectable TreeView

• TreeView can turn to selectable tree by using the selectable prop.
• Default value is false.
• To select multiple items, hold Ctrl (or ⌘ Command on macOS) and click the items.
• To select a range of items, click on the first item of the range, then hold the Shift key while clicking on the last item of the range.

• In selectable mode, onSelectedItemsChange prop can be used to handle the selected items change.

• The const TreeItems data we using for these examples:

• TreeItem can have a selected prop to indicate the selected state of the item.
• TreeItem supports the item prop with type TreeOption.
• TreeOption can have multiple properties and can be used to pass additional data.
• The TreeItemCheckType, TreeOption, TreeItemWithSelection we using for these examples:

OnItemClick

• TreeView supports onItemClick prop to handle the click event on the TreeItem.

Examples

• TreeView can be used to display a list of items in a tree structure with checkboxes.

Accessibility

TreeView is a regular ul[role="tree"] follow WAI-ARIA recommendations.

Roles, States, and Properties

• TreeView has role="tree".
• TreeItem has role="treeitem".
• TreeItem has div[role="group"] element that contains all it children TreeItem.
• TreeItem has aria-expanded="true" when it is open and aria-expanded="false" when it is closed.
• All TreeItem elements in TreeView are focusable, but only one is included in the tab sequence and has tabindex="0".

Keyboard interactions

Key	Function	Condition
Down Arrow	Moves focus to the next node that is focusable without opening or closing a node.	When the any TreeItem has focus.
Up Arrow	Moves focus to the previous node that is focusable without opening or closing a node.	When the any TreeItem has focus.
Right Arrow	- When focus is on a closed node, opens the node; focus does not move. - When focus is on an open node, moves focus to the first child node. - When focus is on an end node, does nothing.	When the any TreeItem has focus.
Left Arrow	- When focus is on an open node, closes the node. - When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. - When focus is on a root node that is also either an end node or a closed node, does nothing.	When the any TreeItem has focus.
Home	Moves focus to the first node in the tree without opening or closing a node.	When the any TreeItem has focus.
End	Moves focus to the last node in the tree that is focusable without opening a node.	When the any TreeItem has focus.