Vue-weblineindia-multiselect NPM

VueJS Multiselect Dropdown Component

vue-weblineindia-multiselect is a feature rich select / dropdown / typeahead component. It provides a default template that fits most use cases for a filterable multi-select dropdown. A lightweight component with easy accessibility and customization.

Tagging
Filtering / Searching
Accessible
Vuex Support
AJAX Support
SSR Support
Zero dependencies
Select Single/Multiple Options
Customizable with slots and SCSS variables

Browser Support


83.0 ✔	77.0 ✔	13.1.1 ✔	83.0 ✔	11.9 ✔

Demo

Getting started

yarn add vue-weblineindia-multiselect

# or use npm

npm install vue-weblineindia-multiselect

Then, import and register the component:

import Vue from "vue";
import multiSelect from "vue-weblineindia-multiselect";

Vue.component("v-multiselect", multiSelect);

The component itself does not include any CSS. You'll need to include it separately:

import "vue-weblineindia-multiselect/lib/vue-select.css";

Alternatively, you can import the scss for complete control of the component styles:

@import "vue-weblineindia-multiselect/src/scss/vue-select.scss";

Usage

<template>
  <div id="app">
    <v-multiselect v-model="value" :options="optionArray" multiple :placeholder="'Select'"/>
  </div>
</template>

export default {
  data() {
    return {
      value: [],
      optionArray: ["option 1", "option 2", "option 3", "option 4"]
    };
  },
}

Available Props

Prop	Data Type	Default	Description
`append-icon`	string	'$dropdown'	Appends an icon to the component, uses the same syntax as v-icon
`append-outer-icon`	string	undefined	Appends an icon to the outside the component's input, uses same syntax as v-icon
`attach`	any	false	Specifies which DOM element that this component should detach to.String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.
`autofocus`	boolean	false	Enables autofocus
`background-color`	string	undefined	Changes the background-color of the input
`cache-items`	boolean	false	Keeps a local unique copy of all items that have been passed through the items prop.
`chips`	boolean	false	Changes display of selections to chips.
`clear-icon`	string	'$clear'	Applied when using clearable and the input is dirty.
`clearable`	boolean	false	Add input clear functionality, default icon is Material Icons clear.
`color`	string	undefined	Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)).
`counter`	boolean/number/string	undefined	Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
`counter-value`	function	null
`dark`	boolean	false	Applies the dark theme variant to the component
`deletable-chips`	boolean	false	Adds a remove icon to selected chips
`dense`	boolean	false	Reduces the input height
`disable-lookup`	boolean	false	Disables keyboard lookup
`disabled`	boolean	false	Disables the input
`eager`	boolean	false	Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
`error`	boolean	false	Puts the input in a manual error state
`error-count`	number/string	1	The total number of errors that should display at once
`error-messages`	string/array	[]	Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
`filled`	boolean	false	Applies the alternate filled input style
`filter`		(item: object, queryText: string, itemText: string): boolean	The function used for filtering items
`flat`	boolean	false	Removes elevation (shadow) added to element when using the solo or solo-inverted props
`full-width`	boolean	false	Designates input type as full-width
`height`	number/string	undefined	Sets the height of the input
`hide-details`	boolean/string	undefined	Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
`hide-selected`	boolean	false	Do not display in the select menu items that are already selected
`hint`	string	undefined	Hint text
`id`	string	undefined	Sets the DOM id on the component
`item-color`	string	'primary'	Sets color of selected items
`item-disabled`	array/string/function	disabled	Set property of items's disabled value
`item-text`	array/string/function	text	Set property of items's text value
`item-value`	array/string/function	value	Set property of items's value
`items`	array	[]	Can be an array of objects or array of strings. When using objects, will look for a text and value field. This can be changed using the item-text and item-value props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
`label`	string		Sets input label
`light`	boolean	false	Applies the light theme variant to the component.
`loader-height`	number/string	2	Specifies the height of the loader
`loading`	boolean/string	false	Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color
`menu-props`	array/string/object	{ "closeOnClick": false, "closeOnContentClick": false, "disableKeys": true, "openOnClick": false, "maxHeight": 304 }	Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }".
`messages`	string/array	[]	Displays a list of messages or message if using a string.
`multiple`	boolean	true	Changes select to multiple. Accepts array for value.
`no-data-text`	string	'$vuetify.noDataText'	Display text when there is no data.
`open-on-clear`	boolean	false	When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state.
`outlined`	boolean	false	Applies the outlined style to the input.
`persistent-hint`	boolean	false	Forces hint to always be visible.
`placeholder`	string	Select	Sets the input’s placeholder text.
`prefix`	string	undefined	Displays prefix text.
`prepend-icon`	string	undefined	Prepends an icon to the component, uses the same syntax as v-icon.
`prepend-inner-icon`	string	undefined	Prepends an icon inside the component's input, uses the same syntax as v-icon.
`readonly`	boolean	false	Puts input in readonly state.
`return-object`	boolean	false	Changes the selection behavior to return the object directly rather than the value specified with item-value.
`reverse`	boolean	false	Reverses the input orientation.
`rounded`	boolean	false	Adds a border radius to the input.
`rules`	array	[]	Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message.
`shaped`	boolean	false	Round if outlined and increase border-radius if filled. Must be used with either outlined or filled.
`single-line`	boolean	false	Label does not move on focus/dirty.
`small-chips`	boolean	false	Changes display of selections to chips with the small property.
`solo`	boolean	false	Changes the style of the input.
`solo-inverted`	boolean	false	Reduces element opacity until focused.
`success`	boolean	false	Puts the input in a manual success state.
`success-messages`	string/array	[]	Puts the input in a success state and passes through custom success messages..
`suffix`	string	undefined	Displays suffix text.
`type`	string	text	Sets input type.
`validate-on-blur`	boolean	false	Delays validation until blur event.
`value`	any	default	The input's value.
`value-comparator`	function	(a: any, b: any): boolean	The comparison algorithm used for values.

Events

Name	Description	Value
`blur`	Emitted when the input is blurred	Event
`change`	Emitted when the input is changed by user interaction	any
`click`	Emitted when input is clicked	MouseEvent
`click:append`	Emitted when appended icon is clicked	Event
`click:append-outer`	Emitted when appended outer icon is clicked	Event
`click:clear`	Emitted when clearable icon clicked	Event
`click:prepend`	Emitted when prepended icon is clicked	Event
`click:prepend-inner`	Emitted when prepended inner icon is clicked	Event
`focus`	Emitted when component is focused	Event
`input`	The updated bound model	any
`keydown`	Emitted when any key is pressed	KeyboardEvent
`mousedown`	Emitted when click is pressed	MouseEvent
`mouseup`	Emitted when click is released	MouseEvent
`update:error`	The error.sync event	boolean
`update:list-index`	Emitted when menu item is selected using keyboard arrows	number
`update:search-input`	The search-input.sync event	string

Slots

Name	Description
`append`	Adds an item inside the input and after input content
`append-item`	Adds an item after menu content
`append-outer`	Adds an item outside the input and after input content
`default`	The default Vue slot.
`item`	Define a custom item appearance
`label`	Replaces the default label
`message`	Customize the messages slot.
`no-data`	Displayed when there are no filtered items.
`prepend`	Adds an item outside the input and before input content.
`prepend-inner`	Adds an item inside the input and before input content.
`prepend-item`	Adds an item before menu content.
`progress`	Slot for custom progress linear (displayed when loading prop is not equal to Boolean False).
`selection`	Define a custom selection appearance.

Sass

Name	Default
`$select-active-chip-opacity`	0.2 !default;
`$select-active-icon-flip`	true !default;
`$select-chip-margin`	4px !default;
`$select-chips-box-enclosed-selections-min-height`	68px !default;
`$select-chips-dense-selections-min-height`	40px !default;
`$select-chips-dense-selections-padding-top`	40px !default;
`$select-chips-selections-padding-top`	42px !default;
`$select-dense-chip-margin`	0 4px 0 4px !default;
`$select-dense-selections-margin`	5px 4px 3px 0 !default;
`$select-outlined-dense-selections-padding-top`	4px 0 !default;
`$select-outlined-selections-padding-top`	8px 0 !default;
`$select-prefix-line-height`	20px !default;
`$select-selected-chip-opacity`	.22 !default;
`$select-selections-line-height`	18px !default;
`$select-selections-margin`	7px 4px 7px 0 !default;
`$select-selections-padding-top`	20px !default;
`$select-small-chips-dense-selections-min-height`	38px !default;
`$select-small-chips-selections-min-height`	26px !default;

Want to Contribute?

Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
Fork it.
Create new branch to contribute your changes.
Commit all your changes to your branch.
Submit a pull request.

Need Help?

We also provide a free, basic support for all users who want to use this VueJS based Multiselect Dropdown component in their software project. In case you want to customize this Multiselect dropdown component to suit your development needs, then feel free to contact our VueJS developers.

Collection of Components

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Credits

vue-weblineindia-multiselect is inspired by vue-select.

License

MIT

Keywords

vue-weblineindia-multiselect,multiselect,select,vue components,vuejs,vuejs component

vue-weblineindia-multiselect select multiselect vue components vuejs vuejs component

@infinitebrahmanuniverse/nolb-vue-w @everything-registry/sub-chunk-3097

1.0.0

4 years ago

vue-weblineindia-multiselect v1.0.0