TreeSelect

Dropdown with a searchable, expandable tree of options. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiTreeSelect } from '@ziyarago/ui/vue'

Regions

Location

Vue

<UiTreeSelect
  label="Location"
  placeholder="Choose a location"
  v-model="value"
  :nodes="[{ id: 'makkah', label: 'Makkah', children: [{ id: 'haram', label: 'Near Haram' }, { id: 'aziziyah', label: 'Aziziyah' }] }, { id: 'madinah', label: 'Madinah', children: [{ id: 'nabawi', label: 'Near Masjid an-Nabawi' }, { id: 'quba', label: 'Quba' }] }]"
 />

Sizes

Location

Vue

<UiTreeSelect
  size="xs"
  label="Location"
  v-model="value"
  :nodes="[{ id: 'makkah', label: 'Makkah', children: [{ id: 'haram', label: 'Near Haram' }] }]"
 />

<UiTreeSelect
  size="sm"
  label="Location"
  v-model="value"
  :nodes="[{ id: 'makkah', label: 'Makkah', children: [{ id: 'haram', label: 'Near Haram' }] }]"
 />

<UiTreeSelect
  size="md"
  label="Location"
  v-model="value"
  :nodes="[{ id: 'makkah', label: 'Makkah', children: [{ id: 'haram', label: 'Near Haram' }] }]"
 />

<UiTreeSelect
  size="lg"
  label="Location"
  v-model="value"
  :nodes="[{ id: 'makkah', label: 'Makkah', children: [{ id: 'haram', label: 'Near Haram' }] }]"
 />

<UiTreeSelect
  size="xl"
  label="Location"
  v-model="value"
  :nodes="[{ id: 'makkah', label: 'Makkah', children: [{ id: 'haram', label: 'Near Haram' }] }]"
 />

API reference

Dropdown with a searchable tree. Use for hierarchical choices such as regions, categories or org units.

Props

PropType and valuesDefaultDescription

modelValuev-modelstring | number—id of the selected node.

nodes{ id: string | number; label: string; children?: Node[]; disabled?: boolean }[]'[]'Tree nodes. A node with disabled: true cannot be clicked. Top level is expanded by default.

selectGroupsbooleanfalseAllow selecting nodes that have children. By default clicking a parent only expands it.

labelstring—Label shown above the control.

placeholderstring—Shown when nothing is selected. Defaults to "—".

disabledbooleanfalseDisables the control.

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the id of the chosen node.

Notes

Typing in the search box expands all matching branches.
The popup closes on outside click and on Escape.