<div align="center"> <a href="https://www.npmjs.com/package/@vueform/multiselect" target="_blank"> <img alt="npm" src="https://img.shields.io/npm/dy/@vueform/multiselect?color=%2353ca2f"> </a> <img alt="CircleCI" src="https://img.shields.io/circleci/build/github/vueform/multiselect"> <a href="https://codecov.io/gh/vueform/multiselect" target="_blank"> <img src="https://img.shields.io/codecov/c/github/vueform/multiselect"/> </a> <a href="https://www.npmjs.com/package/@vueform/multiselect" target="_blank"> <img alt="npm bundle size (scoped version)" src="https://img.shields.io/bundlephobia/minzip/@vueform/multiselect?color=53ca2f"> </a> <a href="https://discord.gg/WhX2nG6GTQ" target="_blank"> <img alt="Discord" src="https://img.shields.io/discord/787237947635793940"> </a> <a href="https://www.npmjs.com/package/@vueform/multiselect" target="_blank"> <img alt="npm" src="https://img.shields.io/npm/v/@vueform/multiselect"> </a> <h1>Vue 3 Multiselect</h1> <a href="https://vueform.com?cid=multiselect" target="_blank"> <img align="center" src="https://github.com/vueform/multiselect/raw/main/assets/logo.svg" width="110"> </a> <a href="https://www.npmjs.com/package/@vueform/multiselect" target="_blank"> <img align="center" src="https://github.com/vueform/multiselect/raw/main/assets/screenshot-1.png"> </a> </div>

Comparison with other libraries

| Feature | @vueform/multiselect | vue-multiselect | vue-select | | --- | :-: | :-: | :-: | | Basic Features* | | Vue.js 2 support | ✓ | ✓ | ✓ | | Vue.js 3 support | ✓ | ~ | ~ | | Single select | ✓ | ✓ | ✓ | | Multiselect (without tags) | ✓ | ✓ | - | | Tags | ✓ | ✓ | ✓ | | Search & filtering | ✓ | ✓ | ✓ | | Option groups | ✓ | ✓ | - | | Advanced features* | | Async search | ✓ | ~ | ~ | | New option when using tags | ✓ | ~ | ✓ | | New option when not using tags | ✓ | - | ✓ | | New option validation | ✓ | ~ | - | | Infinite scroll | ✓ | ~ | ~ | | Append to body | ✓ | ~ | ✓ | | Object value support | ✓ | ✓ | - | | Accents/diacritics sensitivity | ✓ | ~ | ~ | | Search regex | ✓ | - | ~ | | Native select support (required) | ✓ | - | ~ | | Options definition* | | Array | ✓ | ✓ | ✓ | | Object | ✓ | - | - | | Array of objects | ✓ | ✓ | ✓ | | Function (async) | ✓ | - | - | | Styling* | | Override class names | ✓ | - | - | | CSS vars support | ✓ | - | ✓ | | Class based CSS support | ✓ | ✓ | ✓ | | <div><img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Tailwind_CSS_logo.svg" width="160" alt="Tailwind CSS" title="Tailwind CSS" /> support</div> | ✓ | - | - | | Support* | | Accessibility (a11y) | ✓ | ~ | ~ | | Internationalization (i18n) | ✓ | ~ | ~ | | RTL support | ✓ | ✓ | ✓ | | Typescript support | ✓ | ✓ | ✓ | | SSR support | ✓ | ✓ | ✓ | | ES Module support (ESM) | ✓ | - | - | | CSP compilant | ✓ | - | - | | API* | | Events | 12 | 7 | 11 | | Slots | 14 | 12 | 11 | | Documented API methods | 10 | 0 | 0 | | Stats** | | Minzipped size | 9.7 KB | 14.2 KB | 20.6 KB | | Open issues | 18 | 233 | 191 | | Monthly downloads | 180k | 1.1M | 947k | | Dependencies | 0 | 0 | 0 | | Coverage | 100% | unknown | 96% | | Latest realease | 2022. 12. 21. | 2019. 04. 27. | 2022. 12. 18. |

~ - partial support / requires manual extension or official support is in progress * - as of June 13, 2022 - reviewed periodically ** - as of Dec 21, 2022 - reviewed periodically

Disclaimer: based on docs, Github issues and code discovery.

Docs

Sponsors
Comparison with other libraries
Docs
Demo
Installation
Using with Vue 3
Using with Vue 2
- Using with < Vue 2.7
Support
Configuration
- Basic props
- Advanced Props
API methods
Events
Slots
Styling
- Styling with CSS vars
- Styling with Tailwind CSS
  - Using :classes prop
Examples
License

Demo

Check out our <a href="https://jsfiddle.net/xajub20o/" target="_blank">demo</a>.

Installation

npm install @vueform/multiselect

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

Using with Vue 2

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

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

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

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

Using with < Vue 2.7

Switch to <= 2.4.2 to use the Multiselect with Vue.js < 2.7.

Support

Join our Discord channel or open an issue.

Configuration

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: [ { [valueProp]: 1, [label]: 'v1', disabled:true\|false }, //... ] - a function returning a Promise (async function) with query and select$ param. The select$ represents the Multiselect component and its API can be accessed. The promise should return options as an object or as an **arra

Multiselect

Install / Use

README

Sponsors