@stackline/vue-multiselect-dropdown

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

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

Current validation package release: 2.0.1 for Vue 2.x

Why this library?

@stackline/vue-multiselect-dropdown provides a maintained Vue 2 multiselect component 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 Vue 2: 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

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

Setup

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

Vue.use(VueMultiselect);

new Vue({
  el: '#app',
  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'
      }
    };
  }
});

<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 2 docs:

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

License

MIT