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,
},
showOptions: {
  type: Boolean,
  required: false,
  default: true,
},
addTagOn: {
  type: Array,
  required: false,
  default: () => (['enter']),
},
required: {
  type: Boolean,
  required: false,
  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.
  • @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.4.0 (04/06/2021)

  • Array options are no longer treated as objects, but both option value and label will equal to array item value. Eg. option: [‘v1′,’v2’] used to be equal to {0: ‘v1’, 1: ‘v2’}, now they’re equal to {v1: ‘v1’, v2: ‘v2’}.
  • Optimized variable names for lower package size.

v1.3.6 (03/30/2021)

  • Remove extra space when creating a tag with space
  • Fixed issues around refreshing async options
  • Android keyboard fix

v1.3.5 (03/21/2021)

  • Fix for unintended side effect on space when using single mode

v1.3.4 (03/14/2021)

  • Recursion error when accessing value inside computed options
  • Set initial value when options are loaded later

v1.3.3 (03/13/2021)

  • Fixed: Selected items’ label update when options label change
  • Fixed: Horizontal scroll fix
  • Added addTagOn that can enable enter and/or space key to create a tag
  • Added required prop that renders a HTML5 required attribute on a fake input next to multiselect
  • Added showOptions prop that hide options list if somebody wants to have only a free-type tag list

v1.3.2 (02/06/2021)

  • Tags slots scope updated with handleTagRemove instead of remove.

v1.3.1 (02/05/2021)

  • Readme API fix.

v1.3.0 (02/05/2021)

  • Added Typescript definitions based on
  • Added Clear button for multiple and tags mode
  • Added placeholder slot
  • Added proper open and close methods
  • Hide options when resolving with clearOnSearch true
  • Added refreshOptions method to refresh async options
  • Added API docs
  • Bug fixed

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