Feature-rich Multiple Select Component For Vue 3/2

A configurable, feature-rich multiple select component for Vue.js 3 and 2.

More Features:

  • Supports both single and multiple select.
  • Lightweight and easy to use.
  • Live search & filter.
  • Also supports tagging.

Basic usage:

1. Import the multi select component and its stylesheet.

import Multiselect from '@vueform/multiselect'
<style src="@vueform/multiselect/themes/default.css"></style>

2. Register the component.

export default {
  components: {
    Multiselect,
  }
}

3. Add the multi select component to the template.

<Multiselect
  v-model="value"
  :options="options"
/>

4. Add pre-defined options to the component. That’s it.

export default {
  components: {
    Multiselect,
  },
  data() {
    return {
      value: null,
      options: [
        'Vue',
        'Script',
        'Com',
      ]
    }
  }
}

5. Available component options to customize the multiple select.

value: {
  required: false,
},
modelValue: {
  required: false,
},
options: {
  type: [Array, Object, Function],
  required: false,
  default: () => ([])
},
id: {
  type: [String, Number],
  required: false,
},
name: {
  type: [String, Number],
  required: false,
  default: 'multiselect',
},
disabled: {
  type: Boolean,
  required: false,
  default: false,
},
label: {
  type: String,
  required: false,
  default: 'label',
},
trackBy: {
  type: String,
  required: false,
  default: undefined,
},
valueProp: {
  type: String,
  required: false,
  default: 'value',
},
placeholder: {
  type: String,
  required: false,
  default: null,
},
mode: {
  type: String,
  required: false,
  default: 'single', // single|multiple|tags
},
searchable: {
  type: Boolean,
  required: false,
  default: false,
},
limit: {
  type: Number,
  required: false,
  default: -1,
},
hideSelected: {
  type: Boolean,
  required: false,
  default: true,
},
createTag: {
  type: Boolean,
  required: false,
  default: undefined,
},
createOption: {
  type: Boolean,
  required: false,
  default: undefined,
},
appendNewTag: {
  type: Boolean,
  required: false,
  default: undefined,
},
appendNewOption: {
  type: Boolean,
  required: false,
  default: undefined,
},
addTagOn: {
  type: Array,
  required: false,
  default: undefined,
},
addOptionOn: {
  type: Array,
  required: false,
  default: undefined,
},
caret: {
  type: Boolean,
  required: false,
  default: true,
},
loading: {
  type: Boolean,
  required: false,
  default: false,
},
noOptionsText: {
  type: [String, Object],
  required: false,
  default: 'The list is empty',
},
noResultsText: {
  type: [String, Object],
  required: false,
  default: 'No results found',
},
multipleLabel: {
  type: Function,
  required: false,
},
object: {
  type: Boolean,
  required: false,
  default: false,
},
delay: {
  type: Number,
  required: false,
  default: -1,
},
minChars: {
  type: Number,
  required: false,
  default: 0,
},
resolveOnLoad: {
  type: Boolean,
  required: false,
  default: true,
},
filterResults: {
  type: Boolean,
  required: false,
  default: true,
},
clearOnSearch: {
  type: Boolean,
  required: false,
  default: false,
},
clearOnSelect: {
  type: Boolean,
  required: false,
  default: true,
},
canDeselect: {
  type: Boolean,
  required: false,
  default: true,
},
canClear: {
  type: Boolean,
  required: false,
  default: true,
},
max: {
  type: Number,
  required: false,
  default: -1,
},
showOptions: {
  type: Boolean,
  required: false,
  default: true,
},
required: {
  type: Boolean,
  required: false,
  default: false,
},
openDirection: {
  type: String,
  required: false,
  default: 'bottom',
},
nativeSupport: {
  type: Boolean,
  required: false,
  default: false,
},
classes: {
  type: Object,
  required: false,
  default: () => ({})
},
strict: {
  type: Boolean,
  required: false,
  default: true,
},
closeOnSelect: {
  type: Boolean,
  required: false,
  default: true,
},
closeOnDeselect: {
  type: Boolean,
  required: false,
  default: false,
},
autocomplete: {
  type: String,
  required: false,
},
groups: {
  type: Boolean,
  required: false,
  default: false,
},
groupLabel: {
  type: String,
  required: false,
  default: 'label',
},
groupOptions: {
  type: String,
  required: false,
  default: 'options',
},
groupHideEmpty: {
  type: Boolean,
  required: false,
  default: false,
},
groupSelect: {
  type: Boolean,
  required: false,
  default: true,
},
inputType: {
  type: String,
  required: false,
  default: 'text',
},
attrs: {
  required: false,
  type: Object,
  default: () => ({}),
},
onCreate: {
  required: false,
  type: Function,
},
disabledProp: {
  type: String,
  required: false,
  default: 'disabled',
},
searchStart: {
  type: Boolean,
  required: false,
  default: false,
},
reverse: {
  type: Boolean,
  required: false,
  default: false,
},
regex: {
  type: [Object, String, RegExp],
  required: false,
  default: undefined,
},
rtl: {
  type: Boolean,
  required: false,
  default: false,
},
infinite: {
  type: Boolean,
  required: false,
  default: false,
},
aria: {
  required: false,
  type: Object,
  default: () => ({}),
},
clearOnBlur: {
  required: false,
  type: Boolean,
  default: true,
},
locale: {
  required: false,
  type: String,
  default: null,
},
fallbackLocale: {
  required: false,
  type: String,
  default: 'en',
},
searchFilter: {
  required: false,
  type: Function,
  default: null,
},
allowAbsent: {
  required: false,
  type: Boolean,
  default: false,
},

6. Events.

  • @open: after opening the option list.
  • @close: after closing the option list.
  • @select(option): after an option or tag is selected.
  • @deselect(option): after an option is deselected or a tag is removed.
  • @change(value): after the value is changed.
  • @search-change(query): after a character is typed.
  • @tag(query): after enter is hit when a new tag is being created.
  • @clear: when the options are cleared

Preview:

Feature-rich Multiple Select Component For Vue 3

Changelog:

v2.6.2 (04/17/2023)

  • Bugfix

v2.6.1 (03/15/2023)

  • Bugfix

v2.6.0 (03/11/2023)

  • All texts including, option & group labels can now be provided in multiple languages. Added locale and fallbackLocale props.
  • Added searchFilter prop that allow to provide a custom search algorithm.
  • Added allowAbsent option to allow adding values that are not among the options.
  • Added closeOnDeselect prop.
  • Deprecated option event, added create instead (option still works).
  • Tags that added can also be disabled, which will prevent their removal.
  • Bug Fixes

v2.5.8 (12/21/2022)

  • Added –ms-border-width-active and –ms-border-color-active CSS vars
  • Added @max event
  • Added clearOnBlur option
  • Bug Fixes

v2.5.7 (11/22/2022)

  • BREAKING: added a wrapper div and related classes inside the main container next to the dropdown container.
  • Accessibility improvements.
  • Bug Fixes.

v2.5.6 (09/28/2022)

  • Async options resolve fix

v2.5.5 (09/26/2022)

  • Unnecessary ES6 feature removed.

v2.5.3/4 (09/22/2022)

  • A11y improvements.

v2.5.2 (07/23/2022)

  • Fix for tailwind.css.

v2.5.1 (07/11/2022)

  • Vue.js 2.7 compatibility

v2.4.0 (05/30/2022)

  • Added accessibility (a11y) support
  • Added infinite scroll
  • Added RTL support
  • Close on click if opened
  • Added id to input when searchable
  • Re-open input on arrows & search type if closed
  • Close dropdown instead of blur on select
  • Added regex option
  • Scroll to first selected on open
  • Options are not reversed when openPosition: true
  • Added reverse option.
  • Added searchStart option
  • Added disabledProp option
  • Added onCreate option
  • Added select$ as second param to events and async options
  • Added isSelected & isPointed to option slot scope
  • Bug Fixes

v2.3.4 (05/11/2022)

  • Async options change detection.
  • Label prop change detection.
  • Option & label texts can contain HTML.

v2.3.3 (02/26/2022)

  • Added attrs prop.

v2.3.2 (02/06/2022)

  • Bugfix

v2.3.1 (12/16/2021)

  • Deprecated: appendNewTag, createTag, addTagOn props and @tag event.
  • Added appendNewOption, createOption, addOptionOn props and @option event.
  • Added selectAll method.
  • The trackBy prop now defaults to label.
  • Replaces focus on search when an option is selected.
  • Added <span> wrapper for single label with singleLabelText class key.
  • Bug Fixes

Download Details:

Author: vueform

Live Demo: https://jsfiddle.net/xf0jzoct/

Download Link: https://github.com/vueform/multiselect/archive/main.zip

Official Website: https://github.com/vueform/multiselect

Install & Download:

# Yarn
$ yarn add @vueform/multiselect

# NPM
$ npm i @vueform/multiselect

Add Comment