Tree View

A component that is used to show a tree hierarchy.

Preview Component

Please note, the API of this component is currently in a preview phase and is subject to change.

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

Item

PropTypeDefault
id
string
asChild
boolean
disabled
boolean

Root

PropTypeDefault
asChild
boolean
defaultExpandedIds
string[]
defaultSelectedIds
string[]
dir
'ltr' | 'rtl'"ltr"
expandedIds
string[]
focusedId
string
getRootNode
() => ShadowRoot | Node | Document
id
string
onExpandedChange
(details: ExpandedChangeDetails) => void
onFocusChange
(details: FocusChangeDetails) => void
onSelectionChange
(details: SelectionChangeDetails) => void
openOnClick
booleantrue
selectedIds
string[]
selectionMode
'multiple' | 'single'"single"

Tree

PropTypeDefault
asChild
boolean

Label

PropTypeDefault
asChild
boolean

Branch

PropTypeDefault
id
string
asChild
boolean
disabled
boolean

ItemText

PropTypeDefault
asChild
boolean

BranchText

PropTypeDefault
asChild
boolean

BranchContent

PropTypeDefault
asChild
boolean

BranchControl

PropTypeDefault
asChild
boolean

BranchTrigger

PropTypeDefault
asChild
boolean

ItemIndicator

PropTypeDefault
asChild
boolean

BranchIndicator

PropTypeDefault
asChild
boolean