TreeSelect

Tree in a popover, single or multiple

A choice from a hierarchy — a folder, a category under a category, a team inside a department. For a flat list use Select; for a few levels of dependent choice where each level is its own list, CascadeSelect.

Basic

Single

Pick a file

• ›src

  • ›components
• ›docs

—

Multiple, leaves only

index.ts

• ›src

  • ›components
• ›docs

[ "index" ]

<script setup lang="ts">
import { ref } from "vue";
import { BlessLabel, BlessTreeSelect, type BlessTreeNode } from "blessing-ui";
const nodes: BlessTreeNode[] = [
  {
    label: "src",
    id: "src",
    open: true,
    children: [
      {
        label: "components",
        id: "components",
        children: [
          { label: "BlessTree.vue", id: "tree" },
          { label: "BlessTable.vue", id: "table" },
        ],
      },
      { label: "index.ts", id: "index" },
    ],
  },
  { label: "docs", id: "docs", children: [{ label: "index.md", id: "docs-index" }] },
  { label: "README.md", id: "readme" },
];
const one = ref<string>();
const many = ref<string[]>(["index"]);
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessLabel>Single</BlessLabel>
      <BlessTreeSelect v-model="one" :nodes placeholder="Pick a file" />
      <small>{{ one ?? "—" }}</small>
    </div>
    <div class="col">
      <BlessLabel>Multiple, leaves only</BlessLabel>
      <BlessTreeSelect v-model="many" :nodes multiple leaf-only />
      <small>{{ many }}</small>
    </div>
  </div>
</template>

Not inside <p>

The floating panel is a <div>. HTML closes a <p> when it meets a <div>, so a trigger placed inside a paragraph renders differently on the server and the client. Wrap with <span>/<div> instead.

• Enter, Space or ↓ opens it and focus moves into the tree (onto the picked row); the tree's own arrow keys take over from there.
• multiple shows picks as chips. Toggle a row again to remove it, or press Backspace on the field to remove the last one.
• leafOnly allows only rows without children. Inside a Field the field's label names it.

Usage

import { BlessTreeSelect } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
nodes*	BlessTreeNode[]	—
multiple	boolean	—
placeholder	string	"Select…"
leafOnly	boolean	false	only leaves (no children) can be picked
disabled	boolean	—
invalid	boolean	—
label	string	—	accessible name when there's no Field; also names the tree
size	"md" | "sm" | "lg"	"md"
modelValue	string | string[]	—	node id (or path) — string[] when multiple

Events

Name	Payload	Description
select	[node: BlessTreeNode, id: string]
update:modelValue	[value: string | string[] | undefined]