@stackline/vue-multiselect-dropdown

A maintained Vue multiselect dropdown with separate Vue 2 and Vue 3 release lines, controlled state, searchable/grouped options, lazy loading hooks, render functions, skins, body-overlay positioning, and ADA-compliant keyboard/ARIA behavior.

Documentation & Live Demos | Vue 2 Demo | Vue 3 Demo | npm | Repository

Latest Vue 3 package release: 3.0.3 for Vue 3.x

Maintained Vue 2 package release: 2.0.0 for Vue 2.x

Why this library?

@stackline/vue-multiselect-dropdown provides maintained Vue 2 and Vue 3 multiselect release lines for applications that need predictable selection state, search, grouping, skins, keyboard support, and live tested examples.

The package follows a familiar Stackline settings contract while staying idiomatic for each Vue family: bind with v-model, pass :data, customize behavior through :settings, and listen for @select, @de-select, @select-all, @de-select-all, @open, and @close.

Vue Version Compatibility

Installation

For Vue 3 applications:

npm install @stackline/vue-multiselect-dropdown@3.0.3 --save-exact

For Vue 2 applications:

npm install @stackline/vue-multiselect-dropdown@2.0.0 --save-exact

Setup

import { createApp } from 'vue';
import {
  VueMultiselect,
  VueMultiselectDropdown
} from '@stackline/vue-multiselect-dropdown';

const app = createApp({
  components: { VueMultiselectDropdown },
  data() {
    return {
      countries: [
        { id: 1, itemName: 'Brazil' },
        { id: 2, itemName: 'Canada' },
        { id: 3, itemName: 'Portugal' }
      ],
      selectedCountries: [],
      settings: {
        text: 'Select countries',
        enableSearchFilter: true,
        primaryKey: 'id',
        labelKey: 'itemName',
        badgeShowLimit: 3,
        skin: 'classic'
      }
    };
  }
});

app.use(VueMultiselect);
app.mount('#app');

<vue-multiselect-dropdown
  :data="countries"
  v-model="selectedCountries"
  :settings="settings"
/>

Skins

Use settings.skin for classic, material, dark, custom, and brand.

settings.theme is accepted only as a compatibility alias. Prefer settings.skin in new code.

Dialogs and Overflow Containers

Use appendToBody: true or tagToBody: true when the dropdown is inside dialogs, modals, drawers, or containers that set overflow: hidden or overflow: auto.

settings: {
  text: 'Dialog dropdown',
  enableSearchFilter: true,
  skin: 'material',
  appendToBody: true,
  tagToBody: true,
  autoPosition: true
}

With body overlay enabled, the open panel is moved to document.body, aligned to the original trigger, sized to the trigger, recalculated on open, scroll, resize, and selection changes, then restored and cleaned up when the dropdown closes or unmounts.

Events

• input
• change
• select
• de-select
• select-all
• de-select-all
• group-select
• group-de-select
• scroll-to-end
• add-filter-new-item
• open
• close

Instance Methods

this.$refs.dropdown.openDropdown();
this.$refs.dropdown.closeDropdown();
this.$refs.dropdown.focusSearch();
this.$refs.dropdown.selectAll();
this.$refs.dropdown.clearSelection();

Run Locally

npm install
npm run build
npm test

Vue 3 docs:

cd docs-src/vue-3
npm install
npm run build

License

MIT