Tree Select

#Basic usage

tree-select/basic.vue

<script setup lang="ts">
import { TreeSelect, type TreeSelectNode } from "@bysages/vue";
import { ref } from "vue";

const data: TreeSelectNode[] = [
  {
    label: "Ink",
    value: "ink",
    children: [
      { label: "Pine soot", value: "pine" },
      { label: "Lampblack", value: "lamp" },
    ],
  },
  {
    label: "Pigment",
    value: "pigment",
    children: [
      { label: "Stone green", value: "stone-green" },
      { label: "Azurite", value: "azurite", disabled: true },
    ],
  },
];

const value = ref();
</script>

<template>
  <TreeSelect v-model="value" :data="data" placeholder="Choose a medium…" class="w-full" />
</template>

tree-select/filterable Vue React

tree-select/filterable.vue

<script setup lang="ts">
import { TreeSelect, type TreeSelectNode } from "@bysages/vue";
import { ref } from "vue";

const data: TreeSelectNode[] = [
  {
    label: "Ink",
    value: "ink",
    children: [
      { label: "Pine soot", value: "pine" },
      { label: "Lampblack", value: "lamp" },
    ],
  },
  {
    label: "Pigment",
    value: "pigment",
    children: [
      { label: "Stone green", value: "stone-green" },
      { label: "Azurite", value: "azurite" },
    ],
  },
];

const value = ref();
</script>

<template>
  <TreeSelect
    v-model="value"
    :data="data"
    filterable
    placeholder="Choose a medium…"
    class="w-full"
  />
</template>

#Props

#TreeSelect

A tree behind a field: the control reads like an input, the vessel below walks the hierarchy, and one leaf click closes the deal. Single selection — the chosen label rides on the control, its value rides in modelValue. filterable puts a filter line at the top of the vessel; matches keep their ancestors and the branches fan open.

Prop	Type	Default	Description
`modelValue`	`String`	`undefined`	—
`data`	`Array as PropType<TreeSelectNode[]>`		—
`placeholder`	`String`	`"Select…"`	—
`filterable`	`Boolean`	`false`	—
`disabled`	`Boolean`	`false`	—
`invalid`	`Boolean`	`false`	—
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the ladder: the trigger height and the vessel's row register follow it together.