Tree View
A component that is used to show a tree hierarchy.
- Item 1
- Item 1.1
- Item 1.2
- Item 1.2.1
- Item 1.2.2
- Item 2
- Item 2.1
- Item 2.2
- Item 3
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-partattribute 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:
import { TreeView } from '@ark-ui/react'
export const Basic = () => {
return (
<TreeView.Root>
<TreeView.Label>Tree</TreeView.Label>
<TreeView.Tree>
<TreeView.Item value="1.0">
<TreeView.ItemText>1.0</TreeView.ItemText>
</TreeView.Item>
<TreeView.Branch value="2.0">
<TreeView.BranchControl>
<TreeView.BranchIndicator>↕️</TreeView.BranchIndicator>
<TreeView.BranchText>2.0</TreeView.BranchText>
</TreeView.BranchControl>
<TreeView.BranchContent>
<TreeView.Item value="2.1">
<TreeView.ItemText>2.2</TreeView.ItemText>
</TreeView.Item>
<TreeView.Item value="2.2">
<TreeView.ItemText>2.2</TreeView.ItemText>
</TreeView.Item>
</TreeView.BranchContent>
</TreeView.Branch>
</TreeView.Tree>
</TreeView.Root>
)
}
import { TreeView } from '@ark-ui/solid'
export const Basic = () => {
return (
<TreeView.Root>
<TreeView.Label>Tree</TreeView.Label>
<TreeView.Tree>
<TreeView.Item value="1.0">
<TreeView.ItemText>1.0</TreeView.ItemText>
</TreeView.Item>
<TreeView.Branch value="2.0">
<TreeView.BranchControl>
<TreeView.BranchText>2.0</TreeView.BranchText>
</TreeView.BranchControl>
<TreeView.BranchContent>
<TreeView.Item value="2.1">
<TreeView.ItemText>2.2</TreeView.ItemText>
</TreeView.Item>
<TreeView.Item value="2.2">
<TreeView.ItemText>2.2</TreeView.ItemText>
</TreeView.Item>
</TreeView.BranchContent>
</TreeView.Branch>
</TreeView.Tree>
</TreeView.Root>
)
}
<script setup lang="ts">
import { TreeView } from '@ark-ui/vue'
</script>
<template>
<TreeView.Root>
<TreeView.Label>Tree</TreeView.Label>
<TreeView.Tree>
<TreeView.Item value="1.0">
<TreeView.ItemText>1.0</TreeView.ItemText>
</TreeView.Item>
<TreeView.Branch value="2.0">
<TreeView.BranchControl>
<TreeView.BranchTrigger>↕️</TreeView.BranchTrigger>
<TreeView.BranchText>2.0</TreeView.BranchText>
<TreeView.BranchIndicator>↕️</TreeView.BranchIndicator>
</TreeView.BranchControl>
<TreeView.BranchContent>
<TreeView.Item value="2.1">
<TreeView.ItemText>2.1</TreeView.ItemText>
</TreeView.Item>
<TreeView.Item value="2.2">
<TreeView.ItemText>2.2</TreeView.ItemText>
</TreeView.Item>
</TreeView.BranchContent>
</TreeView.Branch>
</TreeView.Tree>
</TreeView.Root>
</template>
API Reference
Root
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
defaultExpandedValueThe initial expanded items of the tree view.
Use this when you do not need to control the state of the tree view. | string[] | |
defaultSelectedValueThe initial selected items of the tree view.
Use this when you do not need to control the state of the tree view. | string[] | |
expandedValueThe id of the expanded nodes | string[] | |
focusedValueThe id of the focused node | string | |
idThe unique identifier of the machine. | string | |
idsThe ids of the tree elements. Useful for composition. | Partial<{ root: string; tree: string; label: string }> | |
onExpandedChangeCalled when the tree is opened or closed | (details: ExpandedChangeDetails) => void | |
onFocusChangeCalled when the focused node changes | (details: FocusChangeDetails) => void | |
onSelectionChangeCalled when the selection changes | (details: SelectionChangeDetails) => void | |
openOnClickWhether clicking on a branch should open it or not | boolean | true |
selectedValueThe id of the selected nodes | string[] | |
selectionModeWhether the tree supports multiple selection
- "single": only one node can be selected
- "multiple": multiple nodes can be selected | 'multiple' | 'single' | "single" |
typeaheadWhether the tree supports typeahead search | boolean |
BranchContent
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
BranchControl
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
BranchIndicator
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Branch
| Prop | Type | Default |
|---|---|---|
valueThe id of the item or branch | string | |
asChildRender as a different element type. | boolean | |
disabledWhether the item or branch is disabled | boolean |
BranchText
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
BranchTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ItemIndicator
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Item
| Prop | Type | Default |
|---|---|---|
valueThe id of the item or branch | string | |
asChildRender as a different element type. | boolean | |
disabledWhether the item or branch is disabled | boolean |
ItemText
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Label
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Tree
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Previous
TooltipNext
Environment