Fractal UI Motif Fractal UI Type
On this Page

TreeItem

TreeItem describes one node in the data passed to TreeView. It is a recursive TypeScript interface, not a rendered component.

Usage

Svelte 
<script lang="ts">
	import { TreeView, type TreeItem } from 'fractalsvelte';

	const items: TreeItem[] = [
		{
			id: 'src',
			label: 'src',
			children: [
				{ id: 'routes', label: 'routes' },
				{ id: 'lib', label: 'lib', disabled: true }
			]
		}
	];
</script>

<TreeView {items} />

Use unique, stable id values. Nested children use the same TreeItem shape, allowing any depth of hierarchy.

API

FieldTypeRequiredDescription
idstringYesStable identifier used for selection, expansion, and reordering.
labelstringYesVisible text for the node.
disabledbooleanNoWhen true, prevents the node from being selected or interacted with.
childrenTreeItem[]NoChild nodes rendered beneath this item.

TreeView accepts TreeItem[] through its required items prop. Its selection and expansion callbacks return the relevant item ids, while reorder mode returns a new TreeItem[] hierarchy.

Use TreeView to render the hierarchy. For immutable tree rearrangement outside the component, use TreeNode and moveTreeNode from fractalsvelte/motion.