TreeItem
A stable leaf or retained branch within a Tree.@gemologic/sheen · navigationPlayground
This example has no scalar controls. Its validated source remains interactive below.
- Source
- index.ts
<Tree label="Files"><TreeItem value="src" label="Source"><TreeItem value="index" label="index.ts" /></TreeItem></Tree>Variant matrix
Retained branch
- Source
- index.ts
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Tree.tsx- Tokens
--sheen-color-fg--sheen-color-bg-hover--sheen-color-focus-ring--sheen-space-inline-sm
Accessibility
Role: treeitemKeyboard: ArrowDown, ArrowUp, ArrowRight, ArrowLeft, Enter, SpaceDo
- Keep each value stable across background refresh and reordering.
Do not
- Do not put unrelated interactive controls inside an item label.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
value * | string | — | Required stable identity, unique within the owning tree. |
label * | string | — | Required visible and accessible item label. |
disabled | boolean | false | Keeps the item focusable while preventing selection, activation, and expansion. |
children | JSX.Element | — | Nested TreeItems; providing children makes this item an expandable branch. |