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