Vue 3 multiselect component with single select, multiselect and tagging options.

Overview
npm CircleCI npm bundle size (scoped version) GitHub Discord npm

Vue 3 Multiselect






Sponsors


Other libraries

  • @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting.
  • @vueform/toggle - Vue 3 toggle component with labels, custom slots and styling options.

Multiselect features

  • Vue 2 & 3 support
  • No dependencies
  • Lightweight (<6 kB gzipped)
  • 100% coverage
  • TypeScript support
  • ESM support
  • Single select options
  • Multiple select options
  • Tags
  • Async options
  • Search & filtering
  • Custom slots
  • Events
  • Fully configurable

Demo

Check out our demo.

Installation

npm install @vueform/multiselect

Usage with Vue 3

<template>
  <div>
    <Multiselect
      v-model="value"
      :options="options"
    />
  </div>
</template>

<script>
  import Multiselect from '@vueform/multiselect'

  export default {
    components: {
      Multiselect,
    },
    data() {
      return {
        value: null,
        options: [
          'Batman',
          'Robin',
          'Joker',
        ]
      }
    }
  }
</script>

<style src="@vueform/multiselect/themes/default.css"></style>

Usage with Vue 2

When using with Vue 2 make sure to install @vue/composition-api first and change the imported module to:

import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js'

Support

Join our Discord channel or open an issue.

Basic props

Name Type Default Description
mode string single Possible values: single|multiple|tags.
options array|object|function [] List of options. Can be:
- an array (eg. [1,2,3])
- an object (eg. {a:1,b:2,c:3})
- an array of objects [{value:1,label:'v1'},{value:2,label:'v2'},{value:3,label:'v3',disabled:true}]
- a function returning a Promise (async function) with query input param. The promise should return options as an object or as an array of objects.
When an array of objects is provided it must have properties that equal to :valueProp's, :trackBy's and :label's value.
searchable boolean false Whether the options should be searchable.
valueProp string 'value' If you provide an array of objects as options this property should be used as the value of the option.
trackBy string 'label' The name of the property that should be searched when searchable is true and an array of objects are provided as :options.
label string 'label' If you provide an array of objects as options the value this property will be displayed as selected option.
placeholder string null The text that should be displayed before any option is selected.
multipleLabel function A function that returns the label to be displayed for selected options when using multiple mode. It receives value as an argument. By default it renders 1 option selected and [n] options selected based on value length.
disabled boolean false Whether the input should be disabled for the user (API can still be used programmatically).
max number -1 The maximum number of options that can be selected when using multiple or tags mode. If -1 the number of options won't be limited.
limit number -1 The maximum number of options that should be displayed. If -1 the number of options won't be limited.
loading boolean false Whether a loading spinner should be shown.
id string 'multiselect' The id of the multiselect container DOM.
caret boolean true Whether should display the caret symbol on the right.
maxHeight number 160 The maximum height of options list (px).
noOptionsText string 'The list is empty' The text that should be displayed when options list is empty.
noResultsText string 'No results found' The text that should be displayed when there are no search results.

Advanced Props

Name Type Default Description
canDeselect boolean true Whether a selected option can be deselected when using single mode.
clearOnSearch boolean false Whether the option list should be cleared when a new character is typed before loading new options list, when using async options.
clearOnSelect boolean true Whether the option list should be cleared upon selecting an option when using async options.
delay number -1 The delay in milliseconds that should occur between the last typed character and refreshing an async option list. If -1 the option list will not refresh when the search query changes. If 0 it will refresh without delay.
filterResults boolean true Whether option list should be filtered by search query. This may be set to false if you are handling filtering manually when returning async options.
minChars number 0 The minimum number of characters that should be typed to refresh async option list. If 0 it will refresh even when the search field becomes empty.
resolveOnLoad boolean true Whether async options should be loaded initially (with an empty query). This should be true if you are planning to load non-object value(s) initially while using async options (to fetch matching objects for values).
appendNewTag boolean true Whether it should append new tag automatically to option list when using tags mode with createTag. If set to false you need to take care of appending a new tag to the provided :options list upon @tag event.
createTag boolean false Whether it should allow creating new tag based on search query when using tags mode.
hideSelected boolean true Whether selected options should be excluded from the option list when using multiple or tags mode.
object boolean false Whether the value should be stored as an object.
If false:
value: ['js','jsx','ts']
If true:
value: [
  {value:'js',label:'Javascript'},
  {value:'jsx',label:'JSX'},
  {value:'ts',label:'Typescript'}
]

API

Name Params Description
open Opens the options list and focuses the multiselect.
close Closes the options list and blurs the multiselect.
select value Selects an option based on its value.
deselect value Deselects an option based on its value.
remove value Alias for deselect.
clear Deselects all selected options.
refreshOptions callback Refreshes async options list.

To access API use ref on Multiselect component:

<Multiselect
  v-model="value"
  :options="options"
  ref="multiselect"
/>
// eg:
mounted() {
  this.$refs.multiselect.open()
}

Events

Event Attributes Description
@change value Emitted after the value is changed.
@close Emitted after closing the option list.
@deselect option Emitted after an option is deselected or a tag is removed.
@open Emitted after opening the option list.
@search-change query Emitted after a character is typed.
@select option Emitted after an option or tag is selected.
@tag query Emitted after enter is hit when a new tag is being created.

Slots

Slot Attributes Description
placeholder Rendered as placeholder when the multiselect does not have value and placeholder prop is defined.
afterlist Rendered after the options list.
beforelist Rendered before the options list.
multiplelabel values Rendered when using multiple mode and options are selected. By default it renders the return value of multipleLabel function.
nooptions Rendered when the options list is empty. By default renders noOptionsText.
noresults Rendered when there are no search results. By default renders noResultsText.
option option, search Renders an option in options list.
singlelabel value Rendered when using single mode and an option is selected. By default it renders the :label if the selected option.
tag option, remove, disabled Renders a tag when using tags mode. When disabled the remove icon should not be displayed. The remove prop should be used to trigger the removal of the tag.

Note: we don't use camelCase because they are normalized back to lowercase when written in DOM.

Examples

Single select

<Multiselect
  v-model="value"
  :options="['Batman', 'Robin', 'Joker']"
/>

JSFiddle - Example #1

Multiselect with object options

<Multiselect
  v-model="value"
  mode="multiple"
  :options="{
    batman: 'Batman',
    robin: 'Robin',
    joker: 'Joker'
  }"
/>

JSFiddle - Example #2

Multiselect with disabled options

<Multiselect
  v-model="value"
  mode="multiple"
  :options="[
    { value: 'batman', label: 'Batman' },
    { value: 'robin', label: 'Robin', disabled: true },
    { value: 'joker', label: 'Joker' },
  ]"
/>

JSFiddle - Example #3

Tags with search, create and array of objects options

<Multiselect
  v-model="value"
  mode="tags"
  :searchable="true"
  :createTag="true"
  :options="[
    { value: 'batman', label: 'Batman' },
    { value: 'robin', label: 'Robin' },
    { value: 'joker', label: 'Joker' },
  ]"
/>

JSFiddle - Example #4

Autocomplete with async options

<Multiselect
  v-model="value"
  placeholder="Choose a programming language"
  :filterResults="false"
  :minChars="1"
  :resolveOnLoad="false"
  :delay="0"
  :searchable="true"
  :options="async function(query) {
    return await fetchLanguages(query) // check JS block in JSFiddle for implementation
  }"
/>

JSFiddle - Example #5

Tags with async options

<Multiselect
  v-model="value"
  mode="tags"
  placeholder="Choose your stack"
  :filterResults="false"
  :minChars="1"
  :resolveOnLoad="false"
  :delay="0"
  :searchable="true"
  :options="async function(query) {
    return await fetchLanguages(query) // check JS block in JSFiddle for implementation
  }"
/>

JSFiddle - Example #6

Select with custom options slot

<Multiselect
  v-model="value"
  placeholder="Select your character"
  label="name"
  :options="[
    { value: 'captainamerica', name: 'Captain America', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/03_-_Captain_America_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
    { value: 'spiderman', name: 'Spiderman', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/12_-_Spiderman_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
    { value: 'ironman', name: 'Iron Man', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/02_-_IRONMAN_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
  ]"
>
  <template v-slot:singlelabel="{ value }">
    <div class="multiselect-single-label">
      <img class="character-label-icon" :src="value.icon"> {{ value.name }}
    </div>
  </template>

  <template v-slot:option="{ option }">
    <img class="character-option-icon" :src="option.icon"> {{ option.name }}
  </template>
</Multiselect>

JSFiddle - Example #7

Multiselect with custom label slot

<Multiselect
  v-model="value"
  mode="multiple"
  placeholder="Select your characters"
  :options="{
    batman: 'Batman',
    robin: 'Robin',
    joker: 'Joker'
  }"
>
  <template v-slot:multiplelabel="{ values }">
    <div class="multiselect-multiple-label">
      {{ values.length }} characters selected
    </div>
  </template>
</Multiselect>

JSFiddle - Example #8

Tags with custom tags slot

<template>
  <Multiselect
    v-model="value"
    mode="tags"
    placeholder="Select employees"
    trackBy="name"
    label="name"
    :search="true"
    :options="[
      { value: 'judy', name: 'Judy', image: 'https://randomuser.me/api/portraits/med/women/1.jpg' },
      { value: 'jane', name: 'Jane', image: 'https://randomuser.me/api/portraits/med/women/2.jpg' },
      { value: 'john', name: 'John', image: 'https://randomuser.me/api/portraits/med/men/1.jpg' },
      { value: 'joe', name: 'Joe', image: 'https://randomuser.me/api/portraits/med/men/2.jpg' }
    ]"
  >
      <template v-slot:tag="{ option, handleTagRemove, disabled }">
        <div class="multiselect-tag is-user">
          <img :src="option.image">
          {{ option.name }}
          <i
            v-if="!disabled"
            @click.prevent
            @mousedown.prevent.stop="handleTagRemove(option, $event)"
          />
        </div>
      </template>
  </Multiselect>
</template>

<style>
  .multiselect-tag.is-user {
    padding: 5px 8px;
    border-radius: 22px;
    background: #35495e;
    margin: 3px 3px 8px;
  }

  .multiselect-tag.is-user img {
    width: 18px;
    border-radius: 50%;
    height: 18px;
    margin-right: 8px;
    border: 2px solid #ffffffbf;
  }

  .multiselect-tag.is-user i:before {
    color: #ffffff;
    border-radius: 50%;;
  }

  .user-image {
    margin: 0 6px 0 0;
    border-radius: 50%;
    height: 22px;
  }
</style>

JSFiddle - Example #9

About Vueform

Vueform streamlines the entire form building process in Vue 2 & 3. It comes with 30+ elements, file uploads, element nesting, 50+ validators, conditions, form steps, i18n including reactive configuration, API access, ESM modules and many more. Check out our live demos or see all the features and sign up for beta to get early access.

License

MIT

Comments
  • Cannot use import statement outside a module

    Cannot use import statement outside a module

    Version

    • Vue version: 2

    Description

    I'm using Nuxt with the composition API and trying to get this plugin to work. When I try to load it, I get the above error: Cannot use import statement outside a module

    Demo

    Please use our JSFiddle template to reproduce the bug. Issues without working reproduction might be ignored.

    Here's a gist of the file. Not doing anything special.

    stale 
    opened by jnarowski 15
  • Label text doesn't change if options updated

    Label text doesn't change if options updated

    Version

    • Vue version: 3

    Description

    We have typical use case: country select, translated to several locales. Options is array of objects:

    const options = [{code: 'au', name: 'Autstralia'}]
    

    If we have selected value au for example in English locale, our label shows Australia. But when change locale for example to Russian (ru), and update options, label will remain the same

    I wrote test-case for this to clear our problem:

    it('should reactively changes label when options has been changed', () => {
      let select = createSelect({
        value: 'ru',
        label: 'name',
        valueProp: 'code',
        options: [{ code: 'au', name: 'Australia' }, { code: 'ru', name: 'Russia' }, { code: 'us', name: 'USA' }],
      })
    
      select.vm.options = [{ code: 'au', name: 'Австралия' }, { code: 'ru', name: 'Россия' }, { code: 'us', name: 'США' }]
    
      expect(select.find('.multiselect-single-label').element).toBeVisible()
      expect(select.find('.multiselect-single-label').html()).toContain('Россия') // <---- Fails here, but shouldn't
    })
    

    Demo

    https://jsfiddle.net/cubk7z50/13/

    opened by vitalybaev 11
  • Single select with 'canDeselect=true' does not behave as real select

    Single select with 'canDeselect=true' does not behave as real select

    Version

    • Vue version: 3

    Description

    I have the following multiselect

    <Multiselect :options="locations" v-model="currentLocation" value-prop="id" label="name" :object="true" :canClear="false" :canDeselect="false"></Multiselect>

    The locations property is dynamic and changes externally, BUT I need the select to always have a value (unless locations is fully empty, of course). Now, having that there is no empty value in the set and if the currently selected value disappears from the list, what a normal behavior would be is to fall back to the first option in the list (and that is how a simple DOM select would behave). Unfortunately - the Multiselect just comes up empty, which is very wrong having that there is no such option in the list at all while others are available. This might be expected behavior in multiselect/tag mode, but certainly not with single select mode. I was hoping that canDeselect will fix this behavior, but unfortunately it didn't and I think at least with canDeselect=true the first available option should be selected, everything else is counterintuitive.

    stale 
    opened by lllopo 10
  • Failing to get initial value (Vue 3)

    Failing to get initial value (Vue 3)

    This is my code. It works just fine, except when "restaurantId" has initial value, it doesn't pre-select the option.

    <restaurant-autocomplete v-model="filters.restaurantId" /> //Int

    RestaurantAutocomplete.vue:

    <template>
        <Multiselect
    		    :delay="500"
    		    :resolveOnLoad="!!$attrs.modelValue"
    		    :options="async (q) => await autocomplete(q)" // [{value: Int, label: String}]
    		    :searchable="true"
    		    :filterResults="false"
    		    :clearOnSearch="true"
    		    :clearOnSelect="false"
    		    placeholder="Restaurant"
    		    :loading="loading"
    		    @select="$emit('update:modelValue', $event)"/>
    </template>
    
    opened by Imperio8 8
  • Pre-populate tags

    Pre-populate tags

    In using multiselect in tags mode is it possible to pre-populate tags with existing values when showing the control.

    See https://jsfiddle.net/57okrzx2/3/ which sets the v-model value on creation but it isn't reflected on the control

    Thanks

    opened by RobWalker 8
  • Bugfix - async loading function called every time a data attribute changed

    Bugfix - async loading function called every time a data attribute changed

    #266 resolveOnLoad - bugfix

    I don't know if the change I made will cause any other problems. But I would appreciate it if you could quickly check and confirm this because that's how it works according to my tests.

    opened by muhammedkaraoglu 7
  • Clicking clear closes Headless UI modal

    Clicking clear closes Headless UI modal

    Version

    • Vue version: 3

    Description

    Similarly to https://github.com/vueform/multiselect/issues/148, when you click the clear (X) button inside the input element, it closes the headless UI modal.

    I was able to resolve this using a @click handler instead of @mousedown, which triggers the modal to close:

    <Multiselect>
        <template #clear="{ clear }">
            <span :class="classes.clear" @click="clear">
                <span :class="classes.clearIcon"></span>
            </span>
        </template>
    </Multiselect>
    

    Demo

    Unable to produce demo due to no available CDN for Headless UI.

    opened by stevebauman 7
  • All options selected when I open the dropdown

    All options selected when I open the dropdown

    Hello! I'm having some problems, I'm using @vueform/multiselect": "^2.2.0" with "vue": "^2.6.11", and this multiselect:

    <Multiselect
        placeholder="Select your report"
        mode="single"
        :closeOnSelect="true"
        :searchable="true"
        :options="dashboards"
        label="title"
        trackBy="title"
        :object="true"
    /> 
    

    My options are like this:

    [
      {
        id: 3,
        title: "Report 1",
        queryInfo: {
          start: 1634153936332,
          end: 1634240336332,
          dimensions: [],
          metrics: [],
          filters: []
        }
      }
      ...
    ]
    

    The problem is that when I open the multiselect all the options are already selected, what I'm missing?

    Screen Shot 2021-10-14 at 20 40 56

    opened by carmolim 7
  • Uncaught TypeError: o.value is not a function

    Uncaught TypeError: o.value is not a function

    Version

    • Vue version: 3

    Description

    When setting the delay prop, after selecting an option I get Uncaught TypeError: o.value is not a function. In the source code the error is here: https://github.com/vueform/multiselect/blob/242aff3ee9238daa78498460480c8d59ed368e53/src/composables/useOptions.js#L418

    I don't know if it breaks anything.

    Demo

    I don't know why I couldn't reproduce it in JSFiddle, but with this minimal example you should be able to reproduce it:

    <multiselect
      :options="['option1', 'option2']"
      :delay="300"
    />
    
    opened by andresespinosapc 7
  • Uncaught (in promise) TypeError: Cannot read property 'value' of undefined

    Uncaught (in promise) TypeError: Cannot read property 'value' of undefined

    Screenshot 2020-12-23 at 1 29 21 PM

    I've followed all steps exactly as instructed, still getting this error. When I installed Multiselect a couple of days back I didn't get such errors. Today installed a fresh copy for my project and it throws this error.

    opened by SunaPanaReloaded 7
  • when using async options, the input does not display the current v-model value

    when using async options, the input does not display the current v-model value

    For example, if I use example #6 of your demo, initializing it with value: 'python, then the current value of v-model is not displayed:

       ...
       example6: {
          value: 'python',
          placeholder: 'Choose a programming language',
          filterResults: false,
          minChars: 1,
          resolveOnLoad: false,
          delay: 0,
          searchable: true,
          options: async (query) => {
            return await fetchLanguages(query)
          }
        },
    
    Screen Shot 2022-03-21 at 6 55 07 PM

    Same if I set the value dynamically with js. It's only displayed when the user does a search and clicks the option.

    Is there any fix or workaround? Thanks

    opened by juanesarango 6
  • Property 'select' does not exist on type 'Multiselect'

    Property 'select' does not exist on type 'Multiselect'

    I use with Vue 3 with TypeScript as code below

    <template>
        <Multiselect
              valueProp="id"
              label="name"
              :options="getCategories"
              :searchable="true"
              ref="selectCategory"
        />
    </template>
    
    <script setup lang="ts">
    import Multiselect from "@vueform/multiselect";
    ...
    const selectCategory = ref<InstanceType<typeof Multiselect>>();
    ...
    </script>
    

    When I call select method it work fine in development, but when I build it get error

    selectCategory.value.select(data);
    
    Property 'select' does not exist on type 'Multiselect'.
    
    opened by cnakh 0
  • [Suggestion] Search behavior on mode=tags

    [Suggestion] Search behavior on mode=tags

    Hi,

    I would like to suggest a better behavior for the search functionality when in mode "tags" (multiple items).

    Current Behavior

    When you click the dropdown, options don't display because it focuses the hidden search text field. You must click the arrow. When you start typing, results start to appear.

    Suggested Behavior

    When you click the dropdown, options display and you can start typing to filter the results.

    Here is a non-vuejs library that implements this behavior https://tom-select.js.org/

    Thank you!

    opened by james-em 3
  • Is 3.0.0-alpha.2 the most up to date version that targets vue 3?

    Is 3.0.0-alpha.2 the most up to date version that targets vue 3?

    I'm running into a really odd issue and trying to see if it it's already been addressed but can't quite see what the best/newest version that targets 3.0 is.

    opened by runxc1 1
  • Invalid types to pass slots to parent

    Invalid types to pass slots to parent

    Version

    • Vue version: 3
    • Multiselect: 2.5.6

    Description

    When trying to use pass slots up, a type error appears.

    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot v-bind="scope" :name="slot" />
    </template>
    
    src/App.vue:7:44 - error TS7053: Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type '{ placeholder: any; afterlist: any; beforelist: any; list: any; multiplelabel: any; singlelabel: any; option: any; groupLabel: any; tag: any; infinite: any; }'.
      No index signature with a parameter of type 'string' was found on type '{ placeholder: any; afterlist: any; beforelist: any; list: any; multiplelabel: any; singlelabel: any; option: any; groupLabel: any; tag: any; infinite: any; }'.
    
                     #[slot]="scope"
    

    Demo

    Run: npm run build

    https://codesandbox.io/s/pedantic-sky-hb7dqe?file=/src/App.vue

    opened by negezor 0
  • Searching after several scrolls in a drop down list causes the drop down to stick, error and no selection can be made.

    Searching after several scrolls in a drop down list causes the drop down to stick, error and no selection can be made.

    Good morning,

    I'm getting this error and noticing it only after scrolling through a long list then trying to search for an item after making several scroll attempts:

    ERROR: runtime-core.esm-bundler.js:167 [Vue warn]: Unhandled error during execution of watcher callback at <Multiselect class="multiselect-custom w-auto" modelValue=null onUpdate:modelValue=fnonUpdate:modelValue ... > at warn @ runtime-core.esm-bundler.js:167 multiselect.js:1765 Uncaught (in promise) TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. at observe (multiselect.js:1765:22) at flush (multiselect.js:1788:5) at callWithErrorHandling (runtime-core.esm-bundler.js:284:22) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:293:21) at Array.job (runtime-core.esm-bundler.js:1891:17) at flushPostFlushCbs (runtime-core.esm-bundler.js:484:47) at flushJobs (runtime-core.esm-bundler.js:529:9)

    Here is my element: <Multiselect class="multiselect-custom w-auto" v-model="create.ScreenData.SelectedDutyStation" mode="single" placeholder="Select..." :close-on-select="true" :searchable="true" :infinite="true" :limit="10" :create-option="false" :clear-on-search="true" :min-chars="0" :options="shallowCore.CommonMenus.DutyStations"/>

    If you just search for the result without scrolling it's not an issue. If you only scroll a couple times then search it's also often not an issue. Noticing this more with larger lists.

    Thank you so much for taking the time out to look into this, really appreciate your time and assistance!

    opened by thefunvampire 2
Releases(2.5.7)
  • 2.5.7(Nov 21, 2022)

    🎉 Feature

    • BREAKING: added a wrapper div and related classes inside the main container next to the dropdown container.
    • Accessibility improvements.

    🐞 Bug Fixes

    • Don't select new tag on IME enter #226.
    • Removed v-html from option & single label for XSS security #278.
    • Arrow left should not throw error when not using tags #271.
    Source code(tar.gz)
    Source code(zip)
  • 2.5.6(Sep 28, 2022)

  • 2.5.5(Sep 26, 2022)

  • 2.5.4(Sep 26, 2022)

  • 2.5.3(Sep 22, 2022)

  • 2.5.2(Jul 22, 2022)

  • 2.5.1(Jul 11, 2022)

  • 2.5.0(Jul 11, 2022)

  • 2.4.2(May 31, 2022)

  • 2.4.1(May 31, 2022)

  • 2.4.0(May 30, 2022)

    🎉 Feature

    • 🎉 Added accessibility (a11y) support #22, #179.
    • 🎉 Added infinite scroll #76, #165, #198.
    • 🎉 Added RTL support #206.
    • 🎉 Close on click if opened #162.
    • 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 #138.
    • Scroll to first selected on open #168.
    • Options are not reversed when openPosition: true.
    • Added reverse option.
    • Added searchStart option #169.
    • Added disabledProp option #202.
    • Added onCreate option #204.
    • Added select$ as second param to events and async options.
    • Added isSelected & isPointed to option slot scope #195.

    🐞 Bug Fixes

    • Headless UI conflict resolved #182.
    • Keep selected options when async #228.
    • Show spinner even when not active #223.
    • Allow false value #222.
    • Resolve options on minChars: 0 too #230.
    • Added keyup, keydown events.
    • Resolved number tag creation duplicate bug.
    • Input height fix when searchable for FF.
    • CSS: moved max height to dropdown container from wrapper.
    • Vite & Nuxt 3 build warn fixes.
    Source code(tar.gz)
    Source code(zip)
  • 2.3.4(May 11, 2022)

  • 2.3.3(Feb 26, 2022)

  • 2.3.2(Feb 6, 2022)

  • 2.3.1(Dec 16, 2021)

  • 2.3.0(Dec 16, 2021)

    🎉 Feature

    • Deprecated: appendNewTag, createTag, addTagOn props and @tag event.
    • Added appendNewOption, createOption, addOptionOn props and @option event #150.
    • Added selectAll method #172.
    • The trackBy prop now defaults to label #175.
    • Replaces focus on search when an option is selected #163.
    • Added <span> wrapper for single label with singleLabelText class key #157.

    🐞 Bug Fixes

    • Don't show spinner when not active #156.
    • TailwindCSS 3 compatibility issue fix #176.
    • Don't show caret when showOptions are disabled #173.
    • Resolved headless UI modal click issue #148.
    • Resolved TailwindCSS/form ring issue #135.
    • Made classes reactive #126.
    • The addTagOn prop uses key instead of keyCode internally #125.
    Source code(tar.gz)
    Source code(zip)
  • 2.2.1(Nov 23, 2021)

  • 2.2.0(Sep 9, 2021)

    🎉 Feature

    • 🎉🎉 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 #119.
    • Added inputType prop #108, #116.
    • Added @paste event #105.
    • Added tab as option for addTagOn #117.
    • Updated default max-height for dropdown (to 15rem).

    🐞 Bug Fixes

    • When closeOnSelect is true in searchable tags and multiple mode the input now blurs upon selecting an option.
    • Fix for empty dropdown when async options are loading #115.
    • Fixed dropdown auto-scrolling when using arrows.
    Source code(tar.gz)
    Source code(zip)
  • 2.1.1(Aug 9, 2021)

  • 2.1.0(Aug 4, 2021)

    🎉 Feature

    • BREAKING: dropdown class now has dropdownHidden when it is closed instead of using v-show (requires using 2.1.0's themes/default.css)
    • 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 #88.
    • Added :strict prop to achieve accent-free search #82.
    • Removed inline styles, CSP compilance #84.
    • Background images are now customizable via background-color #85.

    🐞 Bug Fixes

    • Free typed tags fix #96.
    • Tabindex becomes -1 when :disabled.
    Source code(tar.gz)
    Source code(zip)
  • 2.0.1(Jun 27, 2021)

  • 2.0.0(Jun 20, 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.
    Source code(tar.gz)
    Source code(zip)
  • 1.5.0(May 17, 2021)

    🎉 Feature

    • Added native input support #48.
    • Added openDirection prop #52.
    • Added option as second param for select and deselect events.
    • Added @clear event #68.

    🐞 Bug Fixes

    • Clear icon CSS fix.
    • Fixed unintendeed clear button showing up when canDeselect is false #61.
    Source code(tar.gz)
    Source code(zip)
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 26, 2022
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Nov 26, 2022
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
A vue keyboard MultiSelect component.

vue-keyboard-multiselect A project for building a keyboard-supported MultiSelect component based on Vue.js. Build Setup # install dependencies npm i v

Ziwen Mei 212 Aug 11, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 95 Apr 20, 2022
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 11 Mar 14, 2022
single select dropdown with autocomplete

vue-single-select simple autocomplete select dropdown component for Vue apps for you! Demo Check it out on CodeSandbox What It Does vue-single-select

Rob Rogers 42 Sep 30, 2022
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 30, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 347 Aug 31, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 71 Nov 11, 2022
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

Rahul Gaba 13 Sep 15, 2022
Super awesome select dropdown vue.js component.

v-super-select An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling. Try out the demo sa

Will 7 Mar 31, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch. Demo / API / Main Project ⚙️ Instal

Daybrush (Younkue Choi) 1.2k Nov 21, 2022