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,
  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: '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,
},
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,
},
canClear: {
  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,
},
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,
},

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.2.0 (09/10/2021)

  • Added groups and related props which allow groupping options.
  • Added tailwind.scss theme to use instead of classes if needed.
  • Added support for case sensitive tags when createTag is true.
  • Added inputType prop.
  • Added @paste event.
  • Added tab as option for addTagOn.
  • Updated default max-height for dropdown (to 15rem).

v2.1.1 (08/09/2021)

  • Added closeOnSelect prop.
  • Bug Fixes

v2.1.0 (07/27/2021)

  • BREAKING: removed :maxHeight prop. Use var(–ms-max-height) instead.
  • BREAKING: tags search layout has changed -> added a wrapper div and an extra span to calculate input width.
  • Dropddown can be closed on caret click.
  • Added: strict prop to achieve accent-free search.
  • Removed inline styles, CSP compilance.
  • Background images are now customizable via background-color
  • Bug Fixes

v2.0.1 (06/28/2021)

  • Classname fixes.

v2.0.0 (06/21/2021)

  • BREAKING: Completely rewritten <template> and default.css.
  • Added CSS vars support for easier styling.
  • Added support for utility classes, like TailwindCSS.
  • Caret is now always displayed when caret: true regardless if the multiselect has selected option(s).
  • Added canDeselect and classes prop.
  • Added ; and , options to addTagOn prop.

v1.5.0 (05/18/2021)

  • Added native input support
  • Added openDirection prop
  • Added option as second param for select and deselect events
  • Added @clear event
  • Clear icon CSS fix
  • Fixed unintendeed clear button showing up when canDeselect is false

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