Tree View

A component that is used to show a tree hierarchy.

Anatomy

To set up the tree view component correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the TreeView component in your project. Let’s take a look at the most basic example:

API Reference

Root

PropTypeDefault
asChild
boolean
defaultExpandedValue
string[]
defaultSelectedValue
string[]
expandedValue
string[]
focusedValue
string
id
string
ids
Partial<{ root: string; tree: string; label: string }>
onExpandedChange
(details: ExpandedChangeDetails) => void
onFocusChange
(details: FocusChangeDetails) => void
onSelectionChange
(details: SelectionChangeDetails) => void
openOnClick
booleantrue
selectedValue
string[]
selectionMode
'multiple' | 'single'"single"
typeahead
boolean

BranchContent

PropTypeDefault
asChild
boolean

BranchControl

PropTypeDefault
asChild
boolean

BranchIndicator

PropTypeDefault
asChild
boolean

Branch

PropTypeDefault
value
string
asChild
boolean
disabled
boolean

BranchText

PropTypeDefault
asChild
boolean

BranchTrigger

PropTypeDefault
asChild
boolean

ItemIndicator

PropTypeDefault
asChild
boolean

Item

PropTypeDefault
value
string
asChild
boolean
disabled
boolean

ItemText

PropTypeDefault
asChild
boolean

Label

PropTypeDefault
asChild
boolean

Tree

PropTypeDefault
asChild
boolean