Feature-rich Multiple Select Component For Vue 3/2

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,
},
id: {
  type: [String, Number],
  required: false,
  default: 'multiselect',
},
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: 'label',
},
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,
},
maxHeight: {
  type: Number,
  required: false,
  default: 160,
},
hideSelected: {
  type: Boolean,
  required: false,
  default: true,
},
createTag: {
  type: Boolean,
  required: false,
  default: false,
},
appendNewTag: {
  type: Boolean,
  required: false,
  default: true,
},
caret: {
  type: Boolean,
  required: false,
  default: true,
},
loading: {
  type: Boolean,
  required: false,
  default: false,
},
noOptionsText: {
  type: String,
  required: false,
  default: 'The list is empty',
},
noResultsText: {
  type: String,
  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,
},
max: {
  type: Number,
  required: false,
  default: -1,
},

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.
  • @input(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.

Preview:

Feature-rich Multiple Select Component For Vue 3

Changelog:

v1.2.5 (01/17/2021)

  • Close open dropdown on input click
  • Select first option after async search fix
  • Update options when :options property changes

v1.2.4 (01/12/2021)

  • Added :max property

v1.2.3 (12/29/2020)

  • Bug Fixes

v1.2.2 (12/28/2020)

  • Bug Fixes
  • Added canDeselect option

v1.2.1 (12/23/2020)

  • Changes in v-model will sync with multiselect value

v1.1.3 (12/20/2020)

  • Bug Fixes
  • Added change event
  • Breaking: renamed hideSelectedTag to hideSelected

Download Details:

Author: vueform

Live Demo: https://github.com/vueform/multiselect

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

You Might Be Interested In:

Add Comment