Svelte Component

Tree Views

Display information in a hierarchical structure using collapsible nodes.

typescript
import { TreeView, TreeViewItem, type TreeViewNode } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

Child of Child 1

Child of Child 2

Child 2

Child

Icons

Folder

File 1

File 2

Disabled State

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Clean Code

The Clean Coder

The Art of Unix Programming

TV

Expand & Collapse

We can bind the tree view and trigger methods for expanding or collapsing all children at once.

Clean Code

The Clean Coder

The Art of Unix Programming

The Flash

Guardians of the Galaxy

Black Panther

The Simpsons

Rick and Morty

Family Guy


Selection

Each tree view provides a number of selection options.

Single

When using single selection, our items are setup and treated as radio inputs.

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Medium: books Books: Clean Code

Multiple

When using multiple selection, our items are setup and treated as checkbox inputs.

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Mediums: books,movies Books: Clean Code,The Art of Unix Programming

Relational

Use the children prop to create a relational connection between parent and children.

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Toggle All

By binding to the tree view component we can then toggle selection for all items.

Note: Available only when using multiple selection mode.

Books

Movies

TV


Recursive Mode

Tree views can be generated using a recursive data-driven method.

Books

Single Selection

Relational checking is automatically applied when generating your list in a recursive manner. Setting a child as checked will not automatically affect the parent.

Books

Multiple Selection

Relational checking is automatically applied when generating your list in a recursive manner.

Books