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:
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