TreeView

TreeView is a compound component for rendering hierarchical expandable/collapsible data with keyboard navigation and selection support.

ExamplesCodeUsageChangelog

Basic usage

• Documents
  • Resume.pdf
  • Cover Letter.docx
• Images
• notes.txt

Selected: —

Tailwind v4

<script setup>
import { ref } from 'vue'
const selected = ref('')
</script>

<TreeView v-model="selected">
  <TreeViewItem value="docs" label="Documents" :default-expanded="true">
    <TreeViewItem value="resume" label="Resume.pdf" />
    <TreeViewItem value="cover" label="Cover Letter.docx" />
  </TreeViewItem>
  <TreeViewItem value="notes" label="notes.txt" />
</TreeView>

Multiple selection

• Item A
• Item B
• Item C

Tailwind v4

<TreeView v-model="selected" :multiple="true">
  <TreeViewItem value="a" label="Item A" />
  <TreeViewItem value="b" label="Item B" />
</TreeView>

Props — TreeView

Prop	Type	Default	Description
modelValue	string | string[]	—	Selected item key(s)
multiple	boolean	false	Allow multiple selections

Props — TreeViewItem

Prop	Type	Default	Description
value	string	—	Unique key for this item (required)
label	string	—	Display label (required)
disabled	boolean	false	Disable selection for this item
defaultExpanded	boolean	false	Start expanded when children are present

Slots — TreeViewItem

Slot	Description
default	Nested TreeViewItem children
icon	Icon shown before the label

Events — TreeView

Event	Payload	Description
update:modelValue	string | string[]	Emitted when selection changes