Tree View

An accessible, keyboard-navigable tree for hierarchical data. It implements the WAI-ARIA tree pattern (role="tree" / treeitem, roving focus, aria-level), supports optional checkboxes with cascading or independent selection, draws continuous per-depth guide rails, and composes leading icons, trailing badges, and trailing action controls. The same framework-agnostic core drives the Astro, Svelte, and React implementations.

Default

Pass a nested items array; nodes with children become expandable branches. Click a branch (or press →) to expand it.

AstroReactSvelteVue

PreviewCode

src
components
Button.astro
Input.astro
app.ts
tests
smoke.test.ts
README.md

---
import { TreeView } from "@pindoba/astro-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "Button.astro" },
          { id: "input", label: "Input.astro" },
        ],
      },
      { id: "app", label: "app.ts" },
    ],
  },
  {
    id: "tests",
    label: "tests",
    children: [{ id: "smoke", label: "smoke.test.ts" }],
  },
  { id: "readme", label: "README.md" },
];
---

<TreeView items={items} aria-label="Project files" />

src
components
app.ts
tests
README.md

import { TreeView } from "../TreeView";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "Button.tsx" },
          { id: "input", label: "Input.tsx" },
        ],
      },
      { id: "app", label: "app.ts" },
    ],
  },
  {
    id: "tests",
    label: "tests",
    children: [{ id: "smoke", label: "smoke.test.ts" }],
  },
  { id: "readme", label: "README.md" },
];

export default function DefaultDemo() {
  return <TreeView items={items} aria-label="Project files" />;
}

src
components
app.ts
tests
README.md

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "src",
      label: "src",
      defaultExpanded: true,
      children: [
        {
          id: "components",
          label: "components",
          children: [
            { id: "button", label: "Button.svelte" },
            { id: "input", label: "Input.svelte" },
          ],
        },
        { id: "app", label: "app.ts" },
      ],
    },
    {
      id: "tests",
      label: "tests",
      children: [{ id: "smoke", label: "smoke.test.ts" }],
    },
    { id: "readme", label: "README.md" },
  ];
</script>

<TreeView {items} aria-label="Project files" />

src
components
app.ts
tests
README.md

<script setup lang="ts">
import { TreeView } from "@pindoba/vue-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "Button.svelte" },
          { id: "input", label: "Input.svelte" },
        ],
      },
      { id: "app", label: "app.ts" },
    ],
  },
  {
    id: "tests",
    label: "tests",
    children: [{ id: "smoke", label: "smoke.test.ts" }],
  },
  { id: "readme", label: "README.md" },
];
</script>

<template>
  <TreeView :items="items" aria-label="Project files" />
</template>

Keyboard

The tree follows the WAI-ARIA tree keyboard model with roving focus:

↑ / ↓ — move to the previous / next visible node.
→ — expand a collapsed branch, or step into its first child.
← — collapse an expanded branch, or step to the parent.
Home / End — jump to the first / last visible node.
Enter activates (selects); Space toggles the checkbox / selection. Type-ahead jumps to the next node whose label matches.

Sizes

Tree view supports sm, md (default), and lg — row height follows the Control Var Contract, so a tree row matches a same-size Button or Input.

AstroReactSvelteVue

PreviewCode

Root
Child A
Child B

Root
Child A
Child B

Root
Child A
Child B

---
import { TreeView } from "@pindoba/astro-tree-view";
import { stack } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "root",
    label: "Root",
    defaultExpanded: true,
    children: [
      { id: "a", label: "Child A" },
      { id: "b", label: "Child B" },
    ],
  },
];

const sizes: TreeViewSize[] = ["sm", "md", "lg"];
---

<div class={stack({ gap: "md" })}>
  {
    sizes.map((size) => (
      <TreeView items={items} size={size} aria-label={`Tree ${size}`} />
    ))
  }
</div>

Root
Child A
Child B

Root
Child A
Child B

Root
Child A
Child B

import { TreeView } from "../TreeView";
import { stack } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "root",
    label: "Root",
    defaultExpanded: true,
    children: [
      { id: "a", label: "Child A" },
      { id: "b", label: "Child B" },
    ],
  },
];

const sizes: TreeViewSize[] = ["sm", "md", "lg"];

export default function SizesDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      {sizes.map((size) => (
        <TreeView
          key={size}
          items={items}
          size={size}
          aria-label={`Tree ${size}`}
        />
      ))}
    </div>
  );
}

Root
Child A
Child B

Root
Child A
Child B

Root
Child A
Child B

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "root",
      label: "Root",
      defaultExpanded: true,
      children: [
        { id: "a", label: "Child A" },
        { id: "b", label: "Child B" },
      ],
    },
  ];

  const sizes: TreeViewSize[] = ["sm", "md", "lg"];
</script>

<div class={stack({ gap: "md" })}>
  {#each sizes as size (size)}
    <TreeView {items} {size} aria-label={`Tree ${size}`} />
  {/each}
</div>

Root
Child A
Child B

Root
Child A
Child B

Root
Child A
Child B

<script setup lang="ts">
import { TreeView } from "@pindoba/vue-tree-view";
import { stack } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "root",
    label: "Root",
    defaultExpanded: true,
    children: [
      { id: "a", label: "Child A" },
      { id: "b", label: "Child B" },
    ],
  },
];

const sizes: TreeViewSize[] = ["sm", "md", "lg"];
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <TreeView
      v-for="size in sizes"
      :key="size"
      :items="items"
      :size="size"
      :aria-label="`Tree ${size}`"
    />
  </div>
</template>

Surface

The tree container is a Panel root, so it takes every Panel surface prop — background, feedback, padding, radius (including radius="inner" for a concentric corner inside a Card or Dialog), border, shadow, translucent, and as.

appearance is the shorthand that presets them: "default" (the raised, padded surface) or "subtle" (flush — transparent, unpadded, no shadow). Any Panel prop passed alongside it overrides just that axis.

<TreeView appearance="subtle" items={items} />
<TreeView radius="inner" padding="xs" items={items} />

emphasis="default" / emphasis="subtle" still work as a deprecated alias for appearance. Every other emphasis value is the Panel emphasis ramp ("primary" | "secondary" | "tertiary", defaulting to "secondary").

Nested inside a Card, radius="inner" keeps the tree’s corner concentric with the Card’s — it resolves as the Card’s radius minus its content padding, so the two curves stay in step whatever the Card’s radius and size are.

AstroReactSvelteVue

PreviewCode

The tree container is a Panel root, so the default appearance surface takes radius="inner" and curves concentrically with the Card around it.

src
index.ts
types.ts
README.md

Default radius.

src
index.ts
types.ts
README.md

radius="inner".

---
import { TreeView } from "@pindoba/astro-tree-view";
import Card from "@pindoba/astro-card";
import { css } from "@pindoba/styled-system/css";
import { stack, grid } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      { id: "index", label: "index.ts" },
      { id: "types", label: "types.ts" },
    ],
  },
  { id: "readme", label: "README.md" },
];
---

<div class={stack({ gap: "md", direction: "column", width: "full" })}>
  <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
    The tree container is a Panel root, so the default <code>appearance</code> surface
    takes <code>radius="inner"</code> and curves concentrically with the Card around
    it.
  </p>
  <div class={grid({ columns: 2, gap: "lg" })}>
    <Card size="md" radius="2xl" border="default">
      <TreeView items={items} aria-label="Files, default radius" />
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        Default radius.
      </p>
    </Card>
    <Card size="md" radius="2xl" border="default">
      <TreeView items={items} radius="inner" aria-label="Files, inner radius" />
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        <code>radius="inner"</code>.
      </p>
    </Card>
  </div>
</div>

The tree container is a Panel root, so the default appearance surface takes radius="inner" and curves concentrically with the Card around it.

src
index.ts
types.ts
README.md

Default radius.

src
index.ts
types.ts
README.md

radius="inner".

import { TreeView } from "../TreeView";
import { Card } from "@pindoba/react-card";
import { css } from "@pindoba/styled-system/css";
import { stack, grid } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      { id: "index", label: "index.ts" },
      { id: "types", label: "types.ts" },
    ],
  },
  { id: "readme", label: "README.md" },
];

export default function InnerRadiusDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "full" })}>
      <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
        The tree container is a Panel root, so the default{" "}
        <code>appearance</code> surface takes <code>radius="inner"</code> and
        curves concentrically with the Card around it.
      </p>
      <div className={grid({ columns: 2, gap: "lg" })}>
        <Card size="md" radius="2xl" border="default">
          <TreeView items={items} aria-label="Files, default radius" />
          <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
            Default radius.
          </p>
        </Card>
        <Card size="md" radius="2xl" border="default">
          <TreeView
            items={items}
            radius="inner"
            aria-label="Files, inner radius"
          />
          <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
            <code>radius="inner"</code>.
          </p>
        </Card>
      </div>
    </div>
  );
}

The tree container is a Panel root, so the default appearance surface takes radius="inner" and curves concentrically with the Card around it.

src
index.ts
types.ts
README.md

Default radius.

src
index.ts
types.ts
README.md

radius="inner".

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import Card from "@pindoba/svelte-card";
  import { css } from "@pindoba/styled-system/css";
  import { stack, grid } from "@pindoba/styled-system/patterns";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "src",
      label: "src",
      defaultExpanded: true,
      children: [
        { id: "index", label: "index.ts" },
        { id: "types", label: "types.ts" },
      ],
    },
    { id: "readme", label: "README.md" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column", width: "full" })}>
  <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
    The tree container is a Panel root, so the default <code>appearance</code>
    surface takes <code>radius="inner"</code> and curves concentrically with the Card
    around it.
  </p>
  <div class={grid({ columns: 2, gap: "lg" })}>
    <Card size="md" radius="2xl" border="default">
      <TreeView {items} aria-label="Files, default radius" />
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        Default radius.
      </p>
    </Card>
    <Card size="md" radius="2xl" border="default">
      <TreeView {items} radius="inner" aria-label="Files, inner radius" />
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        <code>radius="inner"</code>.
      </p>
    </Card>
  </div>
</div>

The tree container is a Panel root, so the default appearance surface takes radius="inner" and curves concentrically with the Card around it.

src
index.ts
types.ts
README.md

Default radius.

src
index.ts
types.ts
README.md

radius="inner".

<script setup lang="ts">
import { TreeView } from "@pindoba/vue-tree-view";
import { Card } from "@pindoba/vue-card";
import { css } from "@pindoba/styled-system/css";
import { stack, grid } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      { id: "index", label: "index.ts" },
      { id: "types", label: "types.ts" },
    ],
  },
  { id: "readme", label: "README.md" },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', width: 'full' })">
    <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
      The tree container is a Panel root, so the default
      <code>appearance</code> surface takes <code>radius="inner"</code> and
      curves concentrically with the Card around it.
    </p>
    <div :class="grid({ columns: 2, gap: 'lg' })">
      <Card size="md" radius="2xl" border="default">
        <TreeView :items="items" aria-label="Files, default radius" />
        <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
          Default radius.
        </p>
      </Card>
      <Card size="md" radius="2xl" border="default">
        <TreeView
          :items="items"
          radius="inner"
          aria-label="Files, inner radius"
        />
        <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
          <code>radius="inner"</code>.
        </p>
      </Card>
    </div>
  </div>
</template>

Icons and badges

Each node accepts a badge string (rendered through a <Badge>) and a leading decoration via the <id>:leading slot (Astro) / leading snippet (Svelte) / leading render prop (React) — typically a <Stamp>.

AstroReactSvelteVue

PreviewCode

Documents
resume.pdf
notes.md
todo.txt

---
import { TreeView } from "@pindoba/astro-tree-view";
import Stamp from "@pindoba/astro-stamp";
import { Folder, FileText } from "@lucide/astro";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "docs",
    label: "Documents",
    defaultExpanded: true,
    children: [
      { id: "resume", label: "resume.pdf" },
      { id: "notes", label: "notes.md" },
    ],
  },
  { id: "todo", label: "todo.txt" },
];
---

<TreeView items={items} aria-label="Files with icons">
  <Stamp slot="docs:leading" emphasis="ghost" size="sm"><Folder /></Stamp>
  <Stamp slot="resume:leading" emphasis="ghost" size="sm"><FileText /></Stamp>
  <Stamp slot="notes:leading" emphasis="ghost" size="sm"><FileText /></Stamp>
  <Stamp slot="todo:leading" emphasis="ghost" size="sm"><FileText /></Stamp>
</TreeView>

Documents
resume.pdf
notes.md
todo.txt

import { TreeView } from "../TreeView";
import Stamp from "@pindoba/react-stamp";
import { Folder, FileText } from "lucide-react";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "docs",
    label: "Documents",
    defaultExpanded: true,
    children: [
      { id: "resume", label: "resume.pdf" },
      { id: "notes", label: "notes.md" },
    ],
  },
  { id: "todo", label: "todo.txt" },
];

export default function WithIconsDemo() {
  return (
    <TreeView
      items={items}
      aria-label="Files with icons"
      leading={(item) => (
        <Stamp emphasis="ghost" size="sm">
          {item.hasChildren ? <Folder /> : <FileText />}
        </Stamp>
      )}
    />
  );
}

Documents
resume.pdf
notes.md
todo.txt

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import Folder from "@lucide/svelte/icons/folder";
  import FileText from "@lucide/svelte/icons/file-text";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "docs",
      label: "Documents",
      defaultExpanded: true,
      children: [
        { id: "resume", label: "resume.pdf" },
        { id: "notes", label: "notes.md" },
      ],
    },
    { id: "todo", label: "todo.txt" },
  ];
</script>

<TreeView {items} aria-label="Files with icons">
  {#snippet leading(item)}
    <Stamp emphasis="ghost" size="sm">
      {#if item.hasChildren}<Folder />{:else}<FileText />{/if}
    </Stamp>
  {/snippet}
</TreeView>

Documents
resume.pdf
notes.md
todo.txt

<script setup lang="ts">
import { h } from "vue";
import { TreeView } from "@pindoba/vue-tree-view";
import { Stamp } from "@pindoba/vue-stamp";
import type { TreeItemApi, TreeNodeInput } from "@pindoba/core-tree-view";
import { Folder, FileText } from "./_icons";

const items: TreeNodeInput[] = [
  {
    id: "docs",
    label: "Documents",
    defaultExpanded: true,
    children: [
      { id: "resume", label: "resume.pdf" },
      { id: "notes", label: "notes.md" },
    ],
  },
  { id: "todo", label: "todo.txt" },
];

const leading = (item: TreeItemApi) =>
  h(Stamp, { emphasis: "ghost", size: "sm" }, () =>
    h(item.hasChildren ? Folder : FileText),
  );
</script>

<template>
  <TreeView :items="items" aria-label="Files with icons" :leading="leading" />
</template>

AstroReactSvelteVue

PreviewCode

Inbox12
Work8
Personal4
Archive

---
import { TreeView } from "@pindoba/astro-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "inbox",
    label: "Inbox",
    badge: "12",
    defaultExpanded: true,
    children: [
      { id: "work", label: "Work", badge: "8" },
      { id: "personal", label: "Personal", badge: "4" },
    ],
  },
  { id: "archive", label: "Archive" },
];
---

<TreeView items={items} aria-label="Mailboxes" />

Inbox12
Work8
Personal4
Archive

import { TreeView } from "../TreeView";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "inbox",
    label: "Inbox",
    badge: "12",
    defaultExpanded: true,
    children: [
      { id: "work", label: "Work", badge: "8" },
      { id: "personal", label: "Personal", badge: "4" },
    ],
  },
  { id: "archive", label: "Archive" },
];

export default function WithBadgesDemo() {
  return <TreeView items={items} aria-label="Mailboxes" />;
}

Inbox 12
Work 8
Personal 4
Archive

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "inbox",
      label: "Inbox",
      badge: "12",
      defaultExpanded: true,
      children: [
        { id: "work", label: "Work", badge: "8" },
        { id: "personal", label: "Personal", badge: "4" },
      ],
    },
    { id: "archive", label: "Archive" },
  ];
</script>

<TreeView {items} aria-label="Mailboxes" />

Inbox12
Work8
Personal4
Archive

<script setup lang="ts">
import { TreeView } from "@pindoba/vue-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "inbox",
    label: "Inbox",
    badge: "12",
    defaultExpanded: true,
    children: [
      { id: "work", label: "Work", badge: "8" },
      { id: "personal", label: "Personal", badge: "4" },
    ],
  },
  { id: "archive", label: "Archive" },
];
</script>

<template>
  <TreeView :items="items" aria-label="Mailboxes" />
</template>

Checkboxes (cascading)

Enable checkboxes to render a checkbox per row. With selectionMode="multiple" and selectionBehavior="cascade" (the default), checking a branch checks every descendant and a partially-checked branch renders indeterminate (aria-checked="mixed").

AstroReactSvelteVue

PreviewCode

---
import { TreeView } from "@pindoba/astro-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "fruit",
    label: "Fruit",
    defaultExpanded: true,
    children: [
      { id: "apple", label: "Apple" },
      {
        id: "citrus",
        label: "Citrus",
        defaultExpanded: true,
        children: [
          { id: "orange", label: "Orange" },
          { id: "lemon", label: "Lemon" },
        ],
      },
    ],
  },
  { id: "grain", label: "Grain" },
];
---

<TreeView
  items={items}
  checkboxes
  selectionMode="multiple"
  selectionBehavior="cascade"
  defaultSelectedKeys={["orange"]}
  aria-label="Select foods"
/>

import { TreeView } from "../TreeView";
import { useState } from "react";
import type { Key, TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "fruit",
    label: "Fruit",
    defaultExpanded: true,
    children: [
      { id: "apple", label: "Apple" },
      {
        id: "citrus",
        label: "Citrus",
        defaultExpanded: true,
        children: [
          { id: "orange", label: "Orange" },
          { id: "lemon", label: "Lemon" },
        ],
      },
    ],
  },
  { id: "grain", label: "Grain" },
];

export default function CheckboxesCascadeDemo() {
  const [selected, setSelected] = useState<Set<Key>>(new Set(["orange"]));
  return (
    <>
      <TreeView
        items={items}
        checkboxes
        selectionMode="multiple"
        selectionBehavior="cascade"
        defaultSelectedKeys={["orange"]}
        onSelectionChange={setSelected}
        aria-label="Select foods"
      />
      <p>Selected: {[...selected].join(", ") || "none"}</p>
    </>
  );
}

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import type { Key, TreeNodeInput } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "fruit",
      label: "Fruit",
      defaultExpanded: true,
      children: [
        { id: "apple", label: "Apple" },
        {
          id: "citrus",
          label: "Citrus",
          defaultExpanded: true,
          children: [
            { id: "orange", label: "Orange" },
            { id: "lemon", label: "Lemon" },
          ],
        },
      ],
    },
    { id: "grain", label: "Grain" },
  ];

  let selectedKeys = $state(new Set<Key>(["orange"]));
</script>

<TreeView
  {items}
  checkboxes
  selectionMode="multiple"
  selectionBehavior="cascade"
  bind:selectedKeys
  aria-label="Select foods"
/>
<p>Selected: {[...selectedKeys].join(", ") || "none"}</p>

<script setup lang="ts">
import { ref } from "vue";
import { TreeView } from "@pindoba/vue-tree-view";
import type { Key, TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "fruit",
    label: "Fruit",
    defaultExpanded: true,
    children: [
      { id: "apple", label: "Apple" },
      {
        id: "citrus",
        label: "Citrus",
        defaultExpanded: true,
        children: [
          { id: "orange", label: "Orange" },
          { id: "lemon", label: "Lemon" },
        ],
      },
    ],
  },
  { id: "grain", label: "Grain" },
];

const selected = ref<Set<Key>>(new Set(["orange"]));
const onSelectionChange = (keys: Set<Key>) => (selected.value = keys);
</script>

<template>
  <TreeView
    :items="items"
    checkboxes
    selectionMode="multiple"
    selectionBehavior="cascade"
    :defaultSelectedKeys="['orange']"
    :onSelectionChange="onSelectionChange"
    aria-label="Select foods"
  />
  <p>Selected: {{ [...selected].join(", ") || "none" }}</p>
</template>

Checkboxes (independent)

Use selectionBehavior="independent" for per-node checkboxes with no cascade.

AstroReactSvelteVue

PreviewCode

Permissions
Read
Write
Admin

---
import { TreeView } from "@pindoba/astro-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "perms",
    label: "Permissions",
    defaultExpanded: true,
    children: [
      { id: "read", label: "Read" },
      { id: "write", label: "Write" },
      { id: "admin", label: "Admin" },
    ],
  },
];
---

<TreeView
  items={items}
  checkboxes
  selectionMode="multiple"
  selectionBehavior="independent"
  aria-label="Permissions"
/>

Permissions
Read
Write
Admin

import { TreeView } from "../TreeView";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "perms",
    label: "Permissions",
    defaultExpanded: true,
    children: [
      { id: "read", label: "Read" },
      { id: "write", label: "Write" },
      { id: "admin", label: "Admin" },
    ],
  },
];

export default function CheckboxesIndependentDemo() {
  return (
    <TreeView
      items={items}
      checkboxes
      selectionMode="multiple"
      selectionBehavior="independent"
      aria-label="Permissions"
    />
  );
}

Permissions
Read
Write
Admin

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "perms",
      label: "Permissions",
      defaultExpanded: true,
      children: [
        { id: "read", label: "Read" },
        { id: "write", label: "Write" },
        { id: "admin", label: "Admin" },
      ],
    },
  ];
</script>

<TreeView
  {items}
  checkboxes
  selectionMode="multiple"
  selectionBehavior="independent"
  aria-label="Permissions"
/>

Permissions
Read
Write
Admin

<script setup lang="ts">
import { TreeView } from "@pindoba/vue-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "perms",
    label: "Permissions",
    defaultExpanded: true,
    children: [
      { id: "read", label: "Read" },
      { id: "write", label: "Write" },
      { id: "admin", label: "Admin" },
    ],
  },
];
</script>

<template>
  <TreeView
    :items="items"
    checkboxes
    selectionMode="multiple"
    selectionBehavior="independent"
    aria-label="Permissions"
  />
</template>

Trailing actions

Place interactive controls in the row’s trailing actions slot (<id>:actions in Astro, the actions snippet/render prop in Svelte/React). They render as siblings of the toggle — never nested inside it — so they’re independently focusable, and clicking one never expands or selects the row.

AstroReactSvelteVue

PreviewCode

Team
Ada Lovelace
Alan Turing

---
import { TreeView } from "@pindoba/astro-tree-view";
import Button from "@pindoba/astro-button";
import { Pencil, Trash2 } from "@lucide/astro";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "team",
    label: "Team",
    defaultExpanded: true,
    children: [
      { id: "ada", label: "Ada Lovelace" },
      { id: "alan", label: "Alan Turing" },
    ],
  },
];
---

<TreeView items={items} aria-label="Team members">
  <Fragment slot="ada:actions">
    <Button emphasis="ghost" size="xs" shape="square" aria-label="Edit Ada">
      <Pencil />
    </Button>
    <Button
      emphasis="ghost"
      size="xs"
      shape="square"
      feedback="danger"
      aria-label="Delete Ada"
    >
      <Trash2 />
    </Button>
  </Fragment>
  <Fragment slot="alan:actions">
    <Button emphasis="ghost" size="xs" shape="square" aria-label="Edit Alan">
      <Pencil />
    </Button>
    <Button
      emphasis="ghost"
      size="xs"
      shape="square"
      feedback="danger"
      aria-label="Delete Alan"
    >
      <Trash2 />
    </Button>
  </Fragment>
</TreeView>

Team
Ada Lovelace
Alan Turing

Last action: none

import { TreeView } from "../TreeView";
import Button from "@pindoba/react-button";
import { Pencil, Trash2 } from "lucide-react";
import { useState } from "react";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "team",
    label: "Team",
    defaultExpanded: true,
    children: [
      { id: "ada", label: "Ada Lovelace" },
      { id: "alan", label: "Alan Turing" },
    ],
  },
];

export default function TrailingActionsDemo() {
  const [lastAction, setLastAction] = useState("");
  return (
    <>
      <TreeView
        items={items}
        aria-label="Team members"
        actions={(item) => (
          <>
            <Button
              emphasis="ghost"
              size="xs"
              shape="square"
              aria-label={`Edit ${item.label}`}
              onClick={() => setLastAction(`edit ${item.id}`)}
            >
              <Pencil />
            </Button>
            <Button
              emphasis="ghost"
              size="xs"
              shape="square"
              feedback="danger"
              aria-label={`Delete ${item.label}`}
              onClick={() => setLastAction(`delete ${item.id}`)}
            >
              <Trash2 />
            </Button>
          </>
        )}
      />
      <p>Last action: {lastAction || "none"}</p>
    </>
  );
}

Team
Ada Lovelace
Alan Turing

Last action: none

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import Button from "@pindoba/svelte-button";
  import Pencil from "@lucide/svelte/icons/pencil";
  import Trash from "@lucide/svelte/icons/trash-2";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "team",
      label: "Team",
      defaultExpanded: true,
      children: [
        { id: "ada", label: "Ada Lovelace" },
        { id: "alan", label: "Alan Turing" },
      ],
    },
  ];

  let lastAction = $state("");
</script>

<TreeView {items} aria-label="Team members">
  {#snippet actions(item)}
    <Button
      emphasis="ghost"
      size="xs"
      shape="square"
      aria-label={`Edit ${item.label}`}
      onclick={() => (lastAction = `edit ${item.id}`)}
    >
      <Pencil />
    </Button>
    <Button
      emphasis="ghost"
      size="xs"
      shape="square"
      feedback="danger"
      aria-label={`Delete ${item.label}`}
      onclick={() => (lastAction = `delete ${item.id}`)}
    >
      <Trash />
    </Button>
  {/snippet}
</TreeView>
<p>Last action: {lastAction || "none"}</p>

Team
Ada Lovelace
Alan Turing

Last action: none

<script setup lang="ts">
import { h, ref } from "vue";
import { TreeView } from "@pindoba/vue-tree-view";
import { Button } from "@pindoba/vue-button";
import type { TreeItemApi, TreeNodeInput } from "@pindoba/core-tree-view";
import { Pencil, Trash2 } from "./_icons";

const items: TreeNodeInput[] = [
  {
    id: "team",
    label: "Team",
    defaultExpanded: true,
    children: [
      { id: "ada", label: "Ada Lovelace" },
      { id: "alan", label: "Alan Turing" },
    ],
  },
];

const lastAction = ref("");

const actions = (item: TreeItemApi) => [
  h(
    Button,
    {
      emphasis: "ghost",
      size: "xs",
      shape: "square",
      "aria-label": `Edit ${item.label}`,
      onClick: () => (lastAction.value = `edit ${item.id}`),
    },
    () => h(Pencil),
  ),
  h(
    Button,
    {
      emphasis: "ghost",
      size: "xs",
      shape: "square",
      feedback: "danger",
      "aria-label": `Delete ${item.label}`,
      onClick: () => (lastAction.value = `delete ${item.id}`),
    },
    () => h(Trash2),
  ),
];
</script>

<template>
  <TreeView :items="items" aria-label="Team members" :actions="actions" />
  <p>Last action: {{ lastAction || "none" }}</p>
</template>

Guide rails

Continuous per-depth guide rails connect each branch to its children, with the active branch’s rails highlighted. Set showGuides={false} to drop them and indent with whitespace alone.

AstroReactSvelteVue

PreviewCode

Parent
Child one
Child two
Grandchild

---
import { TreeView } from "@pindoba/astro-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "a",
    label: "Parent",
    defaultExpanded: true,
    children: [
      { id: "a1", label: "Child one" },
      {
        id: "a2",
        label: "Child two",
        defaultExpanded: true,
        children: [{ id: "a2a", label: "Grandchild" }],
      },
    ],
  },
];
---

<TreeView items={items} showGuides={false} aria-label="No guide rails" />

Parent
Child one
Child two
Grandchild

import { TreeView } from "../TreeView";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "a",
    label: "Parent",
    defaultExpanded: true,
    children: [
      { id: "a1", label: "Child one" },
      {
        id: "a2",
        label: "Child two",
        defaultExpanded: true,
        children: [{ id: "a2a", label: "Grandchild" }],
      },
    ],
  },
];

export default function NoGuidesDemo() {
  return (
    <TreeView items={items} showGuides={false} aria-label="No guide rails" />
  );
}

Parent
Child one
Child two
Grandchild

<script lang="ts">
  import TreeView from "../tree-view.svelte";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items: TreeNodeInput[] = [
    {
      id: "a",
      label: "Parent",
      defaultExpanded: true,
      children: [
        { id: "a1", label: "Child one" },
        {
          id: "a2",
          label: "Child two",
          defaultExpanded: true,
          children: [{ id: "a2a", label: "Grandchild" }],
        },
      ],
    },
  ];
</script>

<TreeView {items} showGuides={false} aria-label="No guide rails" />

Parent
Child one
Child two
Grandchild

<script setup lang="ts">
import { TreeView } from "@pindoba/vue-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items: TreeNodeInput[] = [
  {
    id: "a",
    label: "Parent",
    defaultExpanded: true,
    children: [
      { id: "a1", label: "Child one" },
      {
        id: "a2",
        label: "Child two",
        defaultExpanded: true,
        children: [{ id: "a2a", label: "Grandchild" }],
      },
    ],
  },
];
</script>

<template>
  <TreeView :items="items" :showGuides="false" aria-label="No guide rails" />
</template>

Accessibility

Implements the WAI-ARIA tree pattern: role="tree" on the container, role="treeitem" per row, with aria-level, aria-setsize, aria-posinset, and aria-expanded on branches.
Roving tabindex keeps a single tab stop; arrow keys move the cursor and DOM focus together.
Selection state is announced through aria-selected, or aria-checked (including the mixed tri-state) when checkboxes is enabled.
Trailing/leading action controls are siblings of the toggle, never nested inside an interactive element.

#Default

#Keyboard

#Sizes

#Surface

#Icons and badges

#Checkboxes (cascading)

#Checkboxes (independent)

#Trailing actions

#Guide rails

#Accessibility

Default

Keyboard

Sizes

Surface

Icons and badges

Checkboxes (cascading)

Checkboxes (independent)

Trailing actions

Guide rails

Accessibility