TreeSelect

A dropdown trigger combined with a Tree panel. Single mode returns a string, multiple mode (checkboxes) returns string[].

Basic usage

Single

<script setup>
import { ref } from 'vue'
const treeValue = ref(undefined)
const treeData = [
  { key: 'a', label: 'Frontend', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: 'Backend' },
]
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

<script>
export default {
  data() {
    return {
      treeValue: undefined,
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

Multiple

Multiple

<script setup lang="ts">
import { ref } from 'vue'

const treeMulti = ref<string[]>([])
const treeData = [
  { key: 'a', label: 'Frontend', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: 'Backend' },
]
</script>

<template>
  <!-- Multiple -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="Pick a stack" />
</template>

<script>
export default {
  data() {
    return {
      treeMulti: [],
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <!-- Multiple -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="Pick a stack" />
</template>

Disabled and mounting

disabled disables the selector; teleported set to false mounts the dropdown panel in place (no teleport to body).

Disabled / local panel

<script setup lang="ts">
const treeData = [
  { key: 'a', label: 'Frontend', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: 'Backend' },
]
</script>

<template>
  <LhTreeSelect :data="treeData" disabled />
  <LhTreeSelect :data="treeData" :teleported="false" />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <LhTreeSelect :data="treeData" disabled />
  <LhTreeSelect :data="treeData" :teleported="false" />
</template>

API

LhTreeSelect Props

Attribute	Description	Type	Default
data	Tree data	[LhTreeNode](#type-LhTreeNode)[]	—
modelValue	Value (string for single, string[] for multiple)	string | string[]	—
multiple	Multiple mode (checkboxes; value is the checked key array)	boolean	false
disabled	Disabled	boolean	false
placeholder	Placeholder text	string	—
teleported	Teleport the panel to body	boolean	true
sx	Quick layout props	LhSxProps	—

LhTreeSelect Events

Event	Description	Callback
update:modelValue	Emitted when the value changes (use with v-model; string for single, string[] for multiple)	(value: string | string[] | undefined) => void
change	Emitted after the selection changes	(value: string | string[] | undefined) => void

Accessibility

• The trigger is a real <button> with aria-haspopup="tree" + aria-expanded; the panel is role="listbox" (aria-multiselectable in multiple mode)
• Inside the panel the full APG tree-pattern keyboard support is reused
• Closes on outside click or Escape, returning focus to the trigger

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/tree-select/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhTreeSelectProps

export interface LhTreeSelectProps {
  data: LhTreeNode[]
  modelValue?: string | string[]
  multiple?: boolean
  disabled?: boolean
  placeholder?: string
  teleported?: boolean
  sx?: LhSxProps
}

LhTreeNode _{(from @lh-ui/share/core/tree)}

export interface LhTreeNode {
  key: string
  label: string
  children?: LhTreeNode[]
  disabled?: boolean
  isLeaf?: boolean
}