TreeItem

<ts-tree-item> vv0.4.0

The ts-tree-item component.

Open in Storybook for interactive demos.

Preview

<ts-tree-item>Content</ts-tree-item>

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Whether the item is disabled.
expanded	expanded	boolean	false	Whether the item is expanded (has children).
icon	icon	string | undefined	—	Optional Lucide icon name.
label	label	string | undefined	—	The item label.
selected	selected	boolean	false	Whether the item is selected.

Events

Event	Detail	Bubbles	Composed	Description
tsSelect	{ selected: boolean; value: string; }	Yes	Yes	Emitted when the item is selected.
tsToggle	{ expanded: boolean; }	Yes	Yes	Emitted when expand/collapse is toggled.

Slots

Name	Description
*(default)*	Default slot for nested ts-tree-item children.
label	Custom label content.

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The tree item container.
chevron	The expand/collapse chevron.
icon	The icon wrapper.
label	The label wrapper.

ts-tree-item::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-tree-item>Content</ts-tree-item>

React

import { TsTreeItem } from '@tessera-ui/react';

<TsTreeItem>Content</TsTreeItem>