Skip to main content
The MtSelect component provides a searchable dropdown for selecting one or multiple items from a list.

​
Import

import { MtSelect } from '@meteroid/component-library';

​
Props

​
options
Array
required
An array of objects with the labelProperty and valueProperty.
​
modelValue
string | number | boolean | Array | object | null
Dependent on multiSelection, either a single value or an array of values.
​
enableMultiSelection
boolean
default:"false"
Toggles if either one or more items can be selected.
​
labelProperty
string | string[]
default:"'label'"
The object key of the label property. Can be a single string or array of strings.
​
valueProperty
string
default:"'value'"
The object key to use for the value.
​
valueLimit
number
default:"5"
The number of items that are expanded by default.
​
label
string
The label for the select field itself.
​
placeholder
string
The placeholder for the select field.
​
alwaysShowPlaceholder
boolean
default:"true"
Determines if the placeholder should be shown even when there are selections.
​
isLoading
boolean
default:"false"
Toggles the loading state of the select field.
​
disabled
boolean
default:"false"
Disables or enables the select field.
​
hideClearableButton
boolean
default:"false"
Toggles a button to clear all selections.
​
highlightSearchTerm
boolean
default:"true"
Determines whether to highlight the searched term.
​
searchFunction
Function
Used to implement a custom search function. Receives { options, labelProperty, valueProperty, searchTerm }.
​
error
object
An error in your business logic related to this field.
​
small
boolean
default:"false"
Render the select field in small size without a search input.
​
isInherited
boolean
default:"false"
Toggles the inheritance visualization.
​
isInheritanceField
boolean
default:"false"
Determines if the field is inheritable.

​
Events

​
update:modelValue
(value: any) => void
Emitted when the selected value(s) change.
​
item-add
(item: any) => void
Emitted when an item is added to selection.
​
item-remove
(item: any) => void
Emitted when an item is removed from selection.
​
search-term-change
(term: string) => void
Emitted when the search term changes.
​
display-values-expand
() => void
Emitted when the value limit is expanded.
​
paginate
() => void
Emitted when scrolling to bottom of results.

​
Slots

​
prefix
slot
Content before the selection.
​
suffix
slot
Content after the selection.
​
hint
slot
Additional hint content.
​
result-item
slot
Custom template for result items. Receives item, index, and helper functions.
​
result-label-property
slot
Custom template for result item labels.
​
selection-label-property
slot
Custom template for selected item labels.
​
before-item-list
slot
Content before the item list.
​
after-item-list
slot
Content after the item list.

​
Usage

​
Basic Select

<script setup>
import { ref } from 'vue';

const options = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
  { label: 'Option 3', value: 'opt3' },
];

const selected = ref(null);
</script>

<template>
  <mt-select 
    v-model="selected"
    :options="options"
    label="Choose an option"
    placeholder="Select..."
  />
</template>

​
Multi-Select

<template>
  <mt-select 
    v-model="selectedItems"
    :options="options"
    enable-multi-selection
    label="Choose multiple"
  />
</template>

​
With Search

<template>
  <mt-select 
    v-model="selected"
    :options="largeOptionList"
    label="Search and select"
    placeholder="Type to search..."
  />
</template>

​
Custom Search Function

<script setup>
const customSearch = ({ options, labelProperty, searchTerm }) => {
  return options.filter(option => 
    option[labelProperty].toLowerCase().includes(searchTerm.toLowerCase())
  );
};
</script>

<template>
  <mt-select 
    v-model="selected"
    :options="options"
    :search-function="customSearch"
  />
</template>

​
Custom Result Template

<template>
  <mt-select v-model="selected" :options="users">
    <template #result-item="{ item }">
      <div class="user-option">
        <img :src="item.avatar" :alt="item.name" />
        <div>
          <div>{{ item.name }}</div>
          <div class="email">{{ item.email }}</div>
        </div>
      </div>
    </template>
  </mt-select>
</template>

​
Small Select

<template>
  <mt-select 
    v-model="selected"
    :options="options"
    small
  />
</template>

​
Accessibility

  • Keyboard navigation (arrow keys, enter to select)
  • Escape key closes dropdown
  • Screen reader support with ARIA attributes
  • Focus management within dropdown
  • Selected items announced to screen readers
  • Search input accessible

Build docs developers (and LLMs) love

Get started for freeTalk to us