Components / Tree View

Tree View

Hierarchical tree with expand/collapse, single or multi-selection, optional leading icons per node, and full WAI-ARIA keyboard navigation. Items are typed as `TreeItem { label, value?, icon?, children?, expanded?, disabled? }` — pass `icon` to render a leading cg-icon next to the label.

navigation v0.8.0

Playground

Examples

File tree with icons

<cg-tree-view style="max-width:380px;"></cg-tree-view>

Multi-select

<cg-tree-view multiple style="max-width:380px;"></cg-tree-view>

Plain — no icons (minimalist outline)

<cg-tree-view style="max-width:340px;"></cg-tree-view>

Try the keyboard

Keyboard recipe

↓ ↑ move · → expand · ← collapse or jump to parent · Home / End first / last · Enter / Space select

<cg-stack direction="column" gap="md">
  <cg-card padding="md">
    <cg-stack direction="column" gap="xs">
      <cg-text size="sm" weight="semibold">Keyboard recipe</cg-text>
      <cg-text size="xs" muted><strong>↓ ↑</strong> move · <strong>→</strong> expand · <strong>←</strong> collapse or jump to parent · <strong>Home / End</strong> first / last · <strong>Enter / Space</strong> select</cg-text>
    </cg-stack>
  </cg-card>
  <cg-tree-view id="tv-keyboard" style="max-width:380px;"></cg-tree-view>
</cg-stack>

Import

import { CgTreeView } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-tree-view';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`items`	TreeItem[]	[]	Hierarchical item tree. Each TreeItem: label (required), optional value, icon (cg-icon name), children, expanded (initial), disabled.
`multiple`	boolean	false	Multi-selection mode — clicking adds/removes from selected instead of replacing.
`selected`	string[]	[]	Selected item values (or paths if no value is set on the item).

Events

Event	Detail	Description
`cg-tree-select`	{ value: string \| string[] }	Selection changed. Single string in single-select; array in multi-select.
`cg-tree-expand`	{ path: string }	A parent node was expanded.
`cg-tree-collapse`	{ path: string }	A parent node was collapsed.