Multi Select

This component provides a customizable multi-select dropdown with search functionality and the ability to remove selected items.

Installation

npx shadcn-vue@latest add https://lib.adrianondik.com/r/multiselect.json

Usage

<template>
    <MultiSelect />
</template>

<script setup lang="ts">
import MultiSelect from '@/Components/MultiSelect';
</script>

Features

• Multi-select functionality.
• Remove individual selected items using the "X" button.
• Clear all selected items with a single button.
• Filter options via a search input.
• Automatic focus on the search input when the dropdown opens.
• Closes the dropdown when clicking outside the component.
• Accessibility: Enter and Space keys toggle dropdown, Escape closes it.

Props

Prop	Type	Description
modelValue	(string | number)[]	Array of selected values, used for v-model binding.
options	Array<{ value: string | number; label: string }>	Available options to select from.
placeholder	string	Text displayed when no items are selected. Default: "Vybrať katerógie...".
searchPlaceholder	string	Text displayed in the search input. Default: "Hľadaj...".
noResultsText	string	Text shown when no results match the search. Default: "Nenašli sa žiadne výsledky".
clearAllText	string	Text for the "clear all" button. Default: "Vymazať všetky".

Emits

Event	Payload	Description
update:modelValue	(string | number)[]	Triggered when the selected values change (add/remove or clear all).

Reactive Variables

Prop	Type	Description
isOpen	boolean	Tracks whether the dropdown is open or closed.
searchQuery	string	Value of the search input.

Computed

Name	Description
filteredOptions	Filters the options based on searchQuery. Returns all options if the search input is empty.

Example

<template>
  <div>
    <MultiSelect
      v-model="selectedCategories"
      :options="categoryOptions"
      placeholder="Select categories..."
      search-placeholder="Search categories..."
      no-results-text="No categories found"
      clear-all-text="Clear all selections"
    />

    <p class="mt-4">
      Selected Categories: {{ selectedCategories }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MultiSelect from '@/Components/MultiSelect';

const selectedCategories = ref<(string | number)[]>([]);

const categoryOptions = [
  { value: 1, label: 'Technology' },
  { value: 2, label: 'Science' },
  { value: 3, label: 'Health' },
  { value: 4, label: 'Sports' },
  { value: 5, label: 'Entertainment' },
];
</script>