---
outline: deep
---

# Tree item

A single node inside [`<l-tree>`](/elements/tree). Nested `<l-tree-item>` children become sub-nodes. See [Tree](/elements/tree) for examples, selection modes, and keyboard behaviour.

Roles and ARIA states are set on `ElementInternals` and mirrored to DOM attributes, so both `[role="treeitem"]` and `[aria-selected]`/`[aria-expanded]`/`[aria-disabled]` selectors match. See [Tree › Selectors & testing](/elements/tree#selectors-testing).

**`<l-tree-item>`** — Custom Element · Shadow DOM

## API reference

### Importing

```js
import 'luxen-ui/tree-item';
```

### Attributes & Properties

- **expanded**: `boolean` (default: `false`) — Whether the item is expanded.
- **selected**: `boolean` (default: `false`) — Whether the item is selected.
- **indeterminate**: `boolean` (default: `false`) — Whether the checkbox is indeterminate (some descendants selected).
- **disabled**: `boolean` (default: `false`) — Whether the item is disabled.
- **lazy**: `boolean` (default: `false`) — Marks this item as having children that will be loaded on first expand.
- **loading**: `boolean` (default: `false`) — Whether the item is currently loading (shows a spinner).
- **showCheckbox**: `boolean` — Set by `<l-tree>`: whether a checkbox is shown.
- **depth**: `number` — Set by `<l-tree>`: depth of the item in the tree (0 = root).
- **hasChildren**: `boolean` — Whether this item has nested tree-item children.

### Methods

- **setPosition(level: number, posInSet: number, setSize: number)** — Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,
`posInSet`/`setSize` describe the item's rank among its siblings. These let
screen readers announce "level 2, 3 of 5" even when `lazy` children keep the
full set out of the DOM.
- **getChildrenItems({ includeDisabled = true }: unknown)** → `TreeItem[]` — Returns the child `<l-tree-item>` elements directly under this one.
- **isLeaf()** → `boolean` — Returns true if this item has no expandable children.
- **getTextLabel()** → `string` — Returns the text label of this item.
- **toggle()** — Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`).

### Events

- **expand** — Fired when the item is expanded.
- **collapse** — Fired when the item is collapsed.
- **lazy-load** — Fired when a lazy item is expanded for the first time. Consumers should append children and set `lazy=false`.

### Slots

- **(default)** — Label content (kept to a single row).
- **prefix** — Leading content before the label (e.g. icon).
- **suffix** — Trailing content.
- **expand-icon** — Icon shown when the item is collapsed.
- **collapse-icon** — Icon shown when the item is expanded.
- **content** — Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed.

### CSS parts

- `base` — The item row.
- `expand-button` — The chevron toggle area.
- `checkbox` — The native checkbox input.
- `label` — The label container.
- `branch` — Wrapper around the content and children slots; carries the indent guide.
- `content` — The content slot wrapper (block area between the row and the children).
- `children` — The nested items container.

### CSS custom properties

All layout tokens (`--row-height`, `--row-padding-inline`, `--chevron-size`, `--item-gap`, `--indent-*`) are declared on `<l-tree>` and cascade to every item. See [Tree › CSS custom properties](/elements/tree#css-custom-properties).