Feature-rich Multiple Select Component For Vue 3

Install & Download:

# Yarn
$ yarn add @vueform/multiselect
# NPM
$ npm i @vueform/multiselect

Description:

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, Array],
  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,
},
appendToBody: {
  required: false,
  type: Boolean,
  default: false,
},
closeOnScroll: {
  required: false,
  type: Boolean,
  default: false,
},
breakTags: {
  required: false,
  type: Boolean,
  default: false,
},
appendTo: {
  required: false,
  type: String,
},

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.7 (03/20/2024)

Bug Fixes

v2.6.6 (10/19/2023)

Added appendTo option.
Added ${id}-dropdown to dropdown DOM.
Bug Fixes

v2.6.5 (10/16/2023)

Bugfixes

v2.6.4 (10/15/2023)

Bugfixes

v2.6.3 (10/07/2023)

Added appendToBody experimental feature for Vue.js 3 only
trackBy can now accept array
Auto truncate long tags. Added breakTags prop
Added handleCaretClick and isOpen to caret slot
The externalValue (from v-model) is now reactive
Bug Fixes

v2.6.2 (10/06/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)