Logo

Midnight Owl UI

Select (TreeSelect)

Stable v1.0.2

A dropdown select that also handles tree data, multi-select with chips, and search filtering, for when a plain HTML select isn't enough.

Interactive Playground

Experiment with tree hierarchies, selection variants, and styling parameters.

Core Data
Top
Selection Mode
Chips
Row Highlight
Tree Geometry
Dashed Lines
Data Mapping
Overflow & Sizing
States & Theme
Small (sm)
Primary
test
v-model Output:
["test"]
v-model:search Output:
""
Live Source Code
<Select
  v-model="selectedData"
  v-model:search="searchQuery"
  :options="treeData"
  id="assigned-divisions"
  label="Assigned Divisions"
  placeholder="Select divisions..."
  multiple
  displayMode="chips"
  selectionVariant="highlight"
  :parentSelectable="false"
  showExpandCollapse
  treeLineStyle="dashed"
/>

Real-World Usage Examples

Explore practical implementation scenarios ranging from global routing to advanced slot customizations.

Select regions...

1. Country Flags (Custom Slots)

Utilizes the #option and #chip templates to inject flag emojis into the hierarchy. 

<Select
  v-model="regions"
  :options="countryOptions"
  multiple
  displayMode="chips"
  label="Global Port Regions"
  placeholder="Select regions..."
  treeLineStyle="solid"
  :parentSelectable="false"
>
  <template #option="{ option }">
    <span v-if="option.flag">{{ option.flag }}</span>
    <span>{{ option.label }}</span>
  </template>
  <template #chip="{ option, remove }">
    <span v-if="option.flag">{{ option.flag }}</span>
    <span>{{ option.label }}</span>
    <Icon icon="lucide:x" @click.stop="remove()" />
  </template>
</Select>
Select cargo types...

2. Cargo Hierarchy (Text & Highlight)

Demonstrates dashed tree lines with showExpandCollapse and selectionVariant="highlight". 

<Select
  v-model="cargoType"
  :options="cargoOptions"
  multiple
  displayMode="text"
  selectionVariant="highlight"
  label="Cargo Type Categories"
  placeholder="Select cargo types..."
  treeLineStyle="dashed"
  showExpandCollapse
/>
Assign user rights...

3. Deep Permission Tree

A 3-level deep tree forcing closeOnSelect to demonstrate auto-hiding the popover upon selection. 

<Select
  v-model="permissions"
  :options="permOptions"
  multiple
  closeOnSelect
  :parentSelectable="false"
  label="System Permissions (Rapid Entry)"
  placeholder="Assign user rights..."
  treeLineStyle="solid"
  highlightVariant="warning"
/>
Maersk Line (Capacity: 115%)
Vessel capacity exceeds safe routing limits. Please reallocate.

4. Real-time Form Validation

Single-select triggering a reactive validation computed state formatting the input red. canDeselect="false" requires a persistent value. 

<Select
  v-model="vessel"
  :options="vesselOptions"
  :multiple="false"
  :canDeselect="false"
  selectionVariant="highlight"
  highlightVariant="danger"
  label="Vessel RT Overview"
  :error="vesselCapacityExceeded"
/>
Dashboard Overview
Vehicle Orders
System Settings

5. Persistent Inline Menu

Using the inline prop permanently exposes the selection list, making it ideal for sidebars or deep category filters. 

<Select
  v-model="section"
  :options="inlineOptions"
  inline
  selectionVariant="highlight"
  treeLineStyle="solid"
  label="Sidebar Navigation (Inline)"
  maxHeight="200"
/>
TR-1002 (Manila Port)TR-1004 (Batangas)TR-1006 (Davao)TR-1007 (General Santos)
tr-1(Unavailable)

6. Large Chips Array & Loading State

Testing overflow logic with many selected items in lg size, alongside an asynchronous loading state. 

<Select
  v-model="routing"
  :options="vofOptions"
  multiple
  displayMode="chips"
  label="Vehicle Order Routing (Live Merge)"
  placeholder="Route orders..."
  size="lg"
  :maxVisibleTextItems="2"
/>
<Select
  v-model="routing"
  :options="[]"
  loading
  label="Fetching Remote Quotations..."
  placeholder="Loading data..."
  size="lg"
/>

API Reference

Complete specifications for components properties, events, and custom slots.

Props

Name
Type / Signature
Default
Description
v-model
any | any[]
undefined
The bound value. Use an array if multiple is true.
v-model:search
string
""
Secondary two-way binding for the search query typed into the search input, independent of the selected value.
id
string
auto-generated
DOM id applied to the trigger/inline wrapper and linked to the label. Falls back to a unique generated id when omitted.
options
any[]
[]
Array of data objects to build the list or tree.
label
string
undefined
Top or left-aligned input label.
labelPosition
"top" | "left"
"top"
Alignment of the label relative to the input.
placeholder
string
"Select an option..."
Text shown when no options are selected.
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Dimensional size of the component (height, padding, and font size).
rounded
boolean
false
Renders the closed popover trigger with a fully rounded (pill) shape.
inline
boolean
false
Renders the menu persistently inline, bypassing the popover trigger.
multiple
boolean
false
Allows selecting multiple options.
canDeselect
boolean
true
If true, clicking an already selected option in single-select mode will clear the selection.
closeOnSelect
boolean
auto
Closes the popover upon selection. Defaults to true for single-select and false for multiple-select.
displayMode
"text" | "chips"
"text"
Visual rendering of selections when multiple is true.
selectionVariant
"checkbox" | "highlight"
"highlight"
Style of selection indicator in the dropdown menu.
highlightVariant
string
"primary"
Color theme applied to active/selected elements (primary, success, danger, etc.).
parentSelectable
boolean
true
If false, clicking a parent node selects/deselects all its children instead of the parent itself.
searchable
boolean
true
Enables the search input.
showClear
boolean
true
Displays an "x" icon to clear the current selection.
showExpandCollapse
boolean
false
Shows global expand/collapse buttons in the dropdown header.
treeLineStyle
"none" | "solid" | "dashed" | "dotted"
"none"
Visual guide lines for nested children.
optionLabel
string | function
"label"
Key or function to resolve the label from the option object.
optionValue
string | function
"value"
Key or function to resolve the value from the option object.
optionChildren
string
"children"
Key to resolve nested child arrays.
optionDisabled
string | function
"disabled"
Key or function to determine if a specific option is disabled.
maxHeight
string | number
320
Maximum height of the dropdown popover (in pixels).
maxVisibleTextItems
number
3
Limits the number of comma-separated items shown in text mode before truncating.
disabled
boolean
false
Disables user interaction and grays out the component.
loading
boolean
false
Displays a spinning loader and disables interaction.
error
string | boolean | string[]
false
Applies red error styling and displays error message(s) below the select.
required
boolean
false
Displays a red asterisk next to the label.
autofocus
boolean
false
Automatically focuses the component on mount.

Events

Event Name
Payload Signature
Description
@change
(value: any | any[])
Fired when the selected value changes. Emits the newly bound value.
@search
(value: string)
Fired when the user types in the search input.
@create-new
(value: string)
Fired when the "Add" button is clicked for a search query that yielded no results.
@focus
(event: FocusEvent)
Fired when the select wrapper receives focus.
@blur
(event: FocusEvent)
Fired when the select wrapper loses focus.
@open
()
Fired when the dropdown popover is opened.
@close
()
Fired when the dropdown popover is closed.

Slots

Slot Name
Exposed Bindings
Description
trigger
{ isOpen: boolean }
Overrides the entire input/trigger area.
option
{ option: any, selected: boolean, indeterminate: boolean }
Custom template for each row in the dropdown list.
chip
{ option: any, remove: function }
Custom template for the selected item chips (when displayMode="chips").
empty
-
Custom template when search yields no results.
action
-
Custom action area below the empty state (useful for "Create New").