{"id":13809831,"url":"https://github.com/vueform/multiselect","last_synced_at":"2025-05-13T23:10:37.433Z","repository":{"id":37435688,"uuid":"320502889","full_name":"vueform/multiselect","owner":"vueform","description":"Vue 3 multiselect component with single select, multiselect and tagging options (+Tailwind CSS support).","archived":false,"fork":false,"pushed_at":"2024-11-23T16:15:41.000Z","size":2912,"stargazers_count":817,"open_issues_count":75,"forks_count":153,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-06T04:42:25.923Z","etag":null,"topics":["autocomplete","dropdown","multiselect","multiselectdropdown","select","select-multiple","select2","selectbox","tailwind","tailwindcss","vue","vue-select","vue2","vue3","vuejs","vueselect"],"latest_commit_sha":null,"homepage":"https://vueform.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vueform.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-11T07:43:17.000Z","updated_at":"2025-04-25T10:09:59.000Z","dependencies_parsed_at":"2024-01-07T12:53:12.761Z","dependency_job_id":"b227b7b3-c5e5-4666-9733-f948806f0d1d","html_url":"https://github.com/vueform/multiselect","commit_stats":{"total_commits":534,"total_committers":21,"mean_commits":"25.428571428571427","dds":0.06928838951310856,"last_synced_commit":"56903b8b27a5ff8202950446b541519fa4ab8e02"},"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Fmultiselect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Fmultiselect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Fmultiselect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Fmultiselect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vueform","download_url":"https://codeload.github.com/vueform/multiselect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253074214,"owners_count":21849719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","dropdown","multiselect","multiselectdropdown","select","select-multiple","select2","selectbox","tailwind","tailwindcss","vue","vue-select","vue2","vue3","vuejs","vueselect"],"created_at":"2024-08-04T02:00:37.083Z","updated_at":"2025-05-13T23:10:32.416Z","avatar_url":"https://github.com/vueform.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/multiselect\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dy/@vueform/multiselect?color=%2353ca2f\"\u003e\n  \u003c/a\u003e\n\n  \u003cimg alt=\"CircleCI\" src=\"https://img.shields.io/circleci/build/github/vueform/multiselect\"\u003e\n\n  \u003ca href=\"https://codecov.io/gh/vueform/multiselect\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/vueform/multiselect\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/multiselect\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm bundle size (scoped version)\" src=\"https://img.shields.io/bundlephobia/minzip/@vueform/multiselect?color=53ca2f\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://discord.gg/WhX2nG6GTQ\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/787237947635793940\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/multiselect\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@vueform/multiselect\"\u003e\n  \u003c/a\u003e\n\n  \u003ch1\u003eVue 3 Multiselect\u003c/h1\u003e\n  \n  \u003ca href=\"https://vueform.com?cid=multiselect\" target=\"_blank\"\u003e\n    \u003cbr\u003e\n    \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/logo.svg\" width=\"110\"\u003e\n    \u003cbr\u003e\n  \u003c/a\u003e\n\n  \u003cbr\u003e\n  \u003cbr\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/multiselect\" target=\"_blank\"\u003e\n    \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/screenshot-1.png\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\n\u003c/div\u003e\n\n## Sponsors\n\n\u003cdiv align=\"center\"\u003e\u003cbr\u003e\n  \u003ca href=\"https://vueform.com?cid=multiselect\"\u003e\u003cimg src=\"https://github.com/vueform/multiselect/raw/main/assets/logo-horizontal.svg\" width=\"200\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003ca href=\"https://vueform.com?cid=multiselect\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/vueform-banner.png\" alt=\"Vueform\" title=\"Vueform\"\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nVueform is comprehensive **form development framework** for Vue.js. It supercharges and standardizes the entire form building process and takes care of everything from rendering to validation and processing. With our latest tool, the **Drag and Drop Form Builder**, you can allow your developers \u0026 non-tech workforce to build the most complex forms without coding.\n\nFeature highlights:\n- integrate Vueform **Drag and Drop Form Builder** into **any application**\n- save forms in **database** as a JSON\n- use your **own form elements** with **custom configuration** options\n- a complete theming and templating system with **Tailwind support**\n- 25+ form elements with **multi-file uploads**, date pickers and rich text editor\n- element **nesting** and **repeating**\n- **50+ validators** with async, dependent and custom rules\n- **conditional logic** on element \u0026 form level\n- breaking forms into **steps** with **form wizard**\n- **translating** form content and global i18n support.\n\n\u003ca href=\"https://builder.vueform.com/demo?cid=multiselect\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/builder-banner.png\" alt=\"Vueform Builder\" title=\"Vueform Builder\"\u003e\n\u003c/a\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n**Learn more:**\n- Builder: [https://builder.vueform.com](https://builder.vueform.com?cid=multiselect)\n- Framework: [https://vueform.com](https://vueform.com?cid=multiselect)\n\n**Other Vueform libraries:**\n\n* [@vueform/slider](https://github.com/vueform/slider) - Vue 3 slider component with multihandles, tooltips merging and formatting.\n* [@vueform/toggle](https://github.com/vueform/toggle) - Vue 3 toggle component with labels, custom slots and styling options.\n\n## Comparison with other libraries\n\n| Feature | @vueform/multiselect | vue-multiselect | vue-select |\n| --- | :-: | :-: | :-: |\n| \u003cb\u003eBasic Features*\u003cb\u003e |\n| Vue.js 2 support | ✓ | ✓ | ✓ |\n| Vue.js 3 support | ✓ | ~ | ~ |\n| Single select | ✓ | ✓ | ✓ |\n| Multiselect (without tags) | ✓ | ✓ | - |\n| Tags | ✓ | ✓ | ✓ |\n| Search \u0026 filtering | ✓ | ✓ | ✓ |\n| Option groups | ✓ | ✓ | - |\n| \u003cb\u003eAdvanced features*\u003cb\u003e |\n| Async search | ✓ | ~ | ~ |\n| New option when using tags | ✓ | ~ | ✓ |\n| New option when not using tags | ✓ | - | ✓ |\n| New option validation | ✓ | ~ | - |\n| Infinite scroll | ✓ | ~ | ~ |\n| Append to body | ✓ | ~ | ✓ |\n| Object value support | ✓ | ✓ | - |\n| Accents/diacritics sensitivity | ✓ | ~ | ~ |\n| Search regex | ✓ | - | ~ |\n| Native select support (required) | ✓ | - | ~ |\n| \u003cb\u003eOptions definition*\u003cb\u003e |\n| Array | ✓ | ✓ | ✓ |\n| Object | ✓ | - | - |\n| Array of objects | ✓ | ✓ | ✓ |\n| Function (async) | ✓ | - | - |\n| \u003cb\u003eStyling*\u003cb\u003e |\n| Override class names | ✓ | - | - |\n| CSS vars support | ✓ | - | ✓ |\n| Class based CSS support | ✓ | ✓ | ✓ |\n| \u003cdiv\u003e\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/9/95/Tailwind_CSS_logo.svg\" width=\"160\" alt=\"Tailwind CSS\" title=\"Tailwind CSS\" /\u003e support\u003c/div\u003e | ✓ | - | - |\n| \u003cb\u003eSupport*\u003cb\u003e |\n| Accessibility (a11y) | ✓ | ~ | ~ |\n| Internationalization (i18n) | ✓ | ~ | ~ |\n| RTL support | ✓ | ✓ | ✓ |\n| Typescript support | ✓ | ✓ | ✓ |\n| SSR support | ✓ | ✓ | ✓ |\n| ES Module support (ESM) | ✓ | - | - |\n| CSP compilant | ✓ | - | - |\n| \u003cb\u003eAPI*\u003cb\u003e |\n| Events | \u003cb\u003e12\u003c/b\u003e | 7 | 11 |\n| Slots | \u003cb\u003e14\u003c/b\u003e | 12 | 11 |\n| Documented API methods | \u003cb\u003e10\u003c/b\u003e | 0 | 0 |\n| \u003cb\u003eStats**\u003cb\u003e |\n| Minzipped size | \u003cb\u003e9.7 KB\u003c/b\u003e | 14.2 KB | 20.6 KB |\n| Open issues | \u003cb\u003e18\u003c/b\u003e | 233 | 191 |\n| Monthly downloads | 180k | \u003cb\u003e1.1M\u003c/b\u003e | 947k |\n| Dependencies | 0 | 0 | 0 |\n| Coverage | \u003cb\u003e100%\u003c/b\u003e | unknown | 96% |\n| Latest realease | 2022. 12. 21. | 2019. 04. 27. | 2022. 12. 18. |\n\n**~** \\- partial support / requires manual extension or official support is in progress\u003cbr\u003e**\\*** \\- as of June 13, 2022 - reviewed periodically\u003cbr\u003e**\\*\\*** \\- as of Dec 21, 2022 - reviewed periodically\n\n*Disclaimer: based on docs, Github issues and code discovery.*\n\n\n## Docs\n\n- [Sponsors](#sponsors)\n- [Comparison with other libraries](#comparison-with-other-libraries)\n- [Docs](#docs)\n- [Demo](#demo)\n- [Installation](#installation)\n- [Using with Vue 3](#using-with-vue-3)\n- [Using with Vue 2](#using-with-vue-2)\n    - [Using with \\\u003c Vue 2.7](#using-with--vue-27)\n- [Support](#support)\n- [Configuration](#configuration)\n  - [Basic props](#basic-props)\n  - [Advanced Props](#advanced-props)\n- [API methods](#api-methods)\n- [Events](#events)\n- [Slots](#slots)\n- [Styling](#styling)\n  - [Styling with CSS vars](#styling-with-css-vars)\n  - [Styling with Tailwind CSS](#styling-with-tailwind-css)\n    - [Using `:classes` prop](#using-classes-prop)\n- [Examples](#examples)\n  - [Single select](#single-select)\n  - [Multiselect with object options](#multiselect-with-object-options)\n  - [Multiselect with disabled options](#multiselect-with-disabled-options)\n  - [Multiselect with groups](#multiselect-with-groups)\n  - [Tags with search, create and array of objects options](#tags-with-search-create-and-array-of-objects-options)\n  - [Autocomplete with async options](#autocomplete-with-async-options)\n  - [Tags with async options](#tags-with-async-options)\n  - [Select with custom options slot](#select-with-custom-options-slot)\n  - [Multiselect with custom label slot](#multiselect-with-custom-label-slot)\n  - [Tags with custom tags slot](#tags-with-custom-tags-slot)\n  - [Async options with default values](#async-options-with-default-values)\n  - [Default values that are not among the options using `object: true`](#default-values-that-are-not-among-the-options-using-object-true)\n  - [Default values that are not among the options using `allowAbsent: true`](#default-values-that-are-not-among-the-options-using-allowabsent-true)\n  - [Manage created tag asynchronously](#manage-created-tag-asynchronously)\n  - [Load async options from API on open with infinite scroll](#load-async-options-from-api-on-open-with-infinite-scroll)\n  - [Multiselect with localized texts](#multiselect-with-localized-texts)\n- [License](#license)\n\n## Demo\n\nCheck out our \u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003edemo\u003c/a\u003e.\n\n## Installation\n\n```\nnpm install @vueform/multiselect\n```\n\n## Using with Vue 3\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cMultiselect\n      v-model=\"value\"\n      :options=\"options\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Multiselect from '@vueform/multiselect'\n\n  export default {\n    components: {\n      Multiselect,\n    },\n    data() {\n      return {\n        value: null,\n        options: [\n          'Batman',\n          'Robin',\n          'Joker',\n        ]\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle src=\"@vueform/multiselect/themes/default.css\"\u003e\u003c/style\u003e\n```\n\n## Using with Vue 2\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cMultiselect\n      v-model=\"value\"\n      :options=\"options\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js'\n\n  export default {\n    components: {\n      Multiselect,\n    },\n    data() {\n      return {\n        value: null,\n        options: [\n          'Batman',\n          'Robin',\n          'Joker',\n        ]\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle src=\"@vueform/multiselect/themes/default.css\"\u003e\u003c/style\u003e\n```\n\n#### Using with \u003c Vue 2.7\n\nSwitch to [`\u003c= 2.4.2`](https://github.com/vueform/multiselect/tree/2.4.2) to use the Multiselect with Vue.js `\u003c 2.7`.\n\n## Support\n\nJoin our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](https://github.com/vueform/multiselect/issues).\n\n## Configuration\n\n### Basic props\n\n| Name | {Type} Default | Description |\n| --- | --- | --- |\n| **mode** | `{string} 'single'` | Possible values: `'single'\\|'multiple'\\|'tags'`. |\n| **options** | `{array\\|object\\|function} []` | List of options. Can be:\u003cbr\u003e- an array (eg. `[1,2,3]`)\u003cbr\u003e- an object (eg. `{a:1,b:2,c:3}`)\u003cbr\u003e- an array of objects:\u003cbr\u003e`[`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`[valueProp]: 1,`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`[label]: 'v1',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`disabled:true\\|false`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`},`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`//...`\u003cbr\u003e`]`\u003cbr\u003e- 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 **array of objects**.\u003cbr\u003eWhen an array of objects is provided it **must** have properties that equal to `:valueProp`'s, `:trackBy`'s and `:label`'s value. |\n| **groups** | `{boolean} false` | Whether options should be grouped. Example:\u003cbr\u003e`{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groups: true,`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`options: [`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`[groupLabel]: 'Group label',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`[groupOptions]: {options},`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`disabled: true\\|false,`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`}`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`//...`\u003cBr\u003e\u0026nbsp;\u0026nbsp;`]`\u003cbr\u003e`}`\u003cbr\u003eThe `{options}` should equal to regular `options` definition. |\n| **groupLabel** | `{string} 'label'` | The name of the property that contains the label of a group when `options` are provided in group format and `groups` is `true`. |\n| **groupOptions** | `{string} 'options'` | The name of the property that contains the options of a group when `options` are provided in group format and `groups` is `true`. |\n| **groupSelect** | `{boolean} true` | Whether groups can be selected when using `multiple` or `tags` mode. |\n| **groupHideEmpty** | `{boolean} false` | Whether groups that have no `options` by default should be hidden. |\n| **required** | `{boolean} false` | Whether the HTML5 required attribute should be used for multiselect (using an invisible fake input). |\n| **infinite** | `{boolean} false` | Whether the actual option nodes should only be loaded on scroll. The `limit` option defines how many options are loaded initially and in each new batch. |\n| **appendToBody** | `{boolean} false` | **[Vue 3 only]** *(experimental)* Whether the dropdown list should be appended to `\u003cbody\u003e` and positioned absolutely. |\n| **appendTo** | `{string} undefined` | **[Vue 3 only]** *(experimental)* Can be used instead of `appendToBody` to teleport the dropdown to a specific DOM. The value should be a query selector. |\n| **closeOnScroll** | `{boolean} false` | Closes the dropdown list on scrolling parent DOM / window when using `appendToBody: true`. |\n| **searchable** | `{boolean} false` | Whether the options should be searchable. |\n| **valueProp** | `{string} 'value'` | If you provide an array of objects as `options` this property should be used as the value of the option. |\n| **trackBy** | `{string\\|array} undefined` | The name(s) of the properties that should be searched when `searchable` is `true` and an array of objects are provided as `options`. If left `undefined` the `label` prop will be used instead. |\n| **label** | `{string} 'label'` | If you provide an array of objects as `options` the value of this property will be displayed as selected option. |\n| **disabledProp** | `{string} 'disabled'` | If you provide an array of objects as `options` this property should be used to determine whether the option is disabled. |\n| **placeholder** | `{string} null` | The text that should be displayed before any option is selected. |\n| **multipleLabel** | `function(value, select$)` | A function that returns the label to be displayed for selected options when using `multiple` mode. It receives `value` as first argument and the multiselect component `select$` as second. By default it renders `1 option selected` and `[n] options selected` based on `value` length. |\n| **disabled** | `{boolean} false` | Whether the input should be disabled for the user (API can still be used programmatically). |\n| **inputType** | `{string} 'text'` | The `type` attribute of the search input. |\n| **autocomplete** | `{string} undefined` | The `autocomplete` attribute of the search input. |\n| **rtl** | `{boolean} false` | Whether the multiselect should be right-to-left. It also respects `dir=\"rtl\"` on any parent element. |\n| **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. |\n| **limit** | `{number} -1` | The maximum number of options that **should be displayed**. If `-1` the number of options won't be limited. |\n| **loading** | `{boolean} false` | Whether a loading spinner should be shown. |\n| **id** | `{string} 'multiselect'` | The `id` of the multiselect container DOM. |\n| **caret** | `{boolean} true` | Whether should display the caret symbol on the right. |\n| **locale** | `{string} null` | The locale of the multiselect. If a locale is set labels might have an `object` value with different keys for different locales. |\n| **locale** | `{string} 'en'` | The fallback locale. |\n| **noOptionsText** | `{string\\|object} 'The list is empty'` | The text that should be displayed when options list is empty. It can be an object with different keys for different locales. |\n| **noResultsText** | `{string\\|object} 'No results found'` | The text that should be displayed when there are no search results. It can be an object with different keys for different locales. |\n| **openDirection** | `{string} 'bottom'` | Whether the option list should be displayed above or below the multiselect. Possible values: `top\\|bottom` |\n| **reverse** | `{boolean} false` | Whether the option list should be reversed. Only works with `groups: false`. |\n| **regex** | `{regex\\|string} undefined` | The regex that search input should be tested against when `searchable: true`. |\n| **strict** | `{boolean} true` | Whether should regard accents/diacritics in search. |\n| **searchStart** | `{boolean} false` | Whether the search should match the start of the options' `trackBy`s. |\n| **searchFilter** | `function(option, query, select$) null` | A custom search function that overrides the default search algorithm. |\n| **aria** | `object` | An object containing aria attributes to be added for the multiselect. |\n| **classes** | `object` | An object of class names that gets merged with the default values. Default: `{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`container: 'multiselect',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`containerDisabled: 'is-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`containerOpen: 'is-open',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`containerOpenTop: 'is-open-top',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`containerActive: 'is-active',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`wrapper: 'multiselect-wrapper',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`singleLabel: 'multiselect-single-label',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`singleLabelText: 'multiselect-single-label-text',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`multipleLabel: 'multiselect-multiple-label',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`search: 'multiselect-search',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tags: 'multiselect-tags',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tag: 'multiselect-tag',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tagDisabled: 'is-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tagWrapper: 'multiselect-tag-wrapper',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tagWrapperBreak: 'multiselect-tag-wrapper-break',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tagRemove: 'multiselect-tag-remove',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tagRemoveIcon: 'multiselect-tag-remove-icon',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tagsSearchWrapper: 'multiselect-tags-search-wrapper',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tagsSearch: 'multiselect-tags-search',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tagsSearchCopy: 'multiselect-tags-search-copy',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`placeholder: 'multiselect-placeholder',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`caret: 'multiselect-caret',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`caretOpen: 'is-open',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`clear: 'multiselect-clear',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`clearIcon: 'multiselect-clear-icon',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`spinner: 'multiselect-spinner',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`infinite: 'multiselect-infinite',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`infiniteSpinner: 'multiselect-infinite-spinner',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`dropdown: 'multiselect-dropdown',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`dropdownTop: 'is-top',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`dropdownHidden: 'is-hidden',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`options: 'multiselect-options',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`optionsTop: 'is-top',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`group: 'multiselect-group',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groupLabel: 'multiselect-group-label',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groupLabelPointable: 'is-pointable',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groupLabelPointed: 'is-pointed',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groupLabelSelected: 'is-selected',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groupLabelDisabled: 'is-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groupLabelSelectedPointed: 'is-selected is-pointed',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groupLabelSelectedDisabled: 'is-selected is-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`groupOptions: 'multiselect-group-options',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`option: 'multiselect-option',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`optionPointed: 'is-pointed',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`optionSelected: 'is-selected',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`optionDisabled: 'is-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`optionSelectedPointed: 'is-selected is-pointed',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`optionSelectedDisabled: 'is-selected is-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`noOptions: 'multiselect-no-options',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`noResults: 'multiselect-no-results',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`fakeInput: 'multiselect-fake-input',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`assist: 'multiselect-assistive-text'`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`spacer: 'multiselect-spacer'`\u003cbr\u003e`}` |\n\n\u003ca href=\"https://vueform.com?cid=multiselect\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/vueform-banner.png\" alt=\"Vueform\" title=\"Vueform\"\u003e\n\u003c/a\u003e\n\n### Advanced Props\n\n| Name | {Type} Default | Description |\n| --- | --- | --- |\n| **allowAbsent** | `{boolean} false` | Whether values should be allowed which are not part of options even when using `object: false`. The selected values which are not part of the option list will have the same value and label. This can be useful if you're using an async option list with an array of string options as a result where both labels and values will be the same and you want to have default values which are not part of the initially resolved options. [Example #13](#example-13) |\n| **canDeselect** | `{boolean} true` | Whether a selected option can be deselected when using `single` mode. |\n| **canClear** | `{boolean} true` | Whether option(s) can be cleared. |\n| **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. |\n| **clearOnSelect** | `{boolean} true` | Whether the option list should be cleared upon selecting an option when using async options. |\n| **closeOnSelect** | `{boolean} true` | Whether the option list should be closed upon selecting an option. |\n| **closeOnDeselect** | `{boolean} true` | Whether the option list should be closed upon deselecting an option. |\n| **clearOnBlur** | `{boolean} true` | Whether the search should be cleared when the input is blurred when `searchable: true`. |\n| **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. |\n| **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. |\n| **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. |\n| **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). |\n| **breakTags** | `{boolean} false` | Whether long tags should be broken into multiple lines (otherwise truncated at max width). |\n| **appendNewTag** | `{boolean} true` | **Deprecated 2.3.0: use `appendNewOption` instead.**\u003cbr\u003eWhether 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. |\n| **createTag** | `{boolean} false` | **Deprecated 2.3.0: use `createOption` instead.**\u003cbr\u003eWhether it should allow creating new tags based on search query when using `tags` mode. |\n| **addTagOn** | `{array} ['enter']` | **Deprecated 2.3.0: use `addOptionOn` instead.**\u003cbr\u003eThe list of keys that creates a new tag while typing in the search field when having `createTag` enabled. Possible values: `'enter'\\|'space'\\|'tab'\\|';'\\|','`. |\n| **appendNewOption** | `{boolean} true` | Whether it should append new option automatically to option list when `searchable` and `createTag` are enabled. If set to `false` you need to take care of appending a new option to the provided `:options` list upon `@option` event. |\n| **createOption** | `{boolean} false` | Whether it should allow creating new options based on search query when `searchable` is enabled. |\n| **addOptionOn** | `{array} ['enter']` | The list of keys that creates a new option while typing in the search field when having `createOption` enabled. Possible values: `'enter'\\|'space'\\|'tab'\\|';'\\|','`. |\n| **onCreate** | `function(option, select$)` | Transforms the created tag before being added when `createOption` is enabled. It receives the original `option` as first param, which is the object that would be added to the option list (`{value: 'Value', label: 'Label'}`) and the Multiselect `component` as the second. It should return an object that contains at least the keys defined by `valueProp`, `label` \u0026 `trackBy` options. If defined and returns `false` the option will not be added (the add can be handled manually by updating `options` \u0026 `v-model`). |\n| **hideSelected** | `{boolean} true` | Whether selected options should be excluded from the option list when using `multiple` or `tags` mode. |\n| **showOptions** | `{boolean} true` | Whether option list should be displayed. Can be used to create free-typed tags. |\n| **object** | `{boolean} false` | Whether the value should be stored as an object.\u003cbr\u003eIf **false**:\u003cbr\u003e`value: ['js','jsx','ts']`\u003cbr\u003eIf **true**:\u003cbr\u003e `value: [`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`{value:'js',label:'Javascript'},`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`{value:'jsx',label:'JSX'},`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`{value:'ts',label:'Typescript'}`\u003cbr\u003e`]` |\n| **attrs** | `{object} {}` | HTML attributes to add to the `input` field when `search` is enabled. |\n| **nativeSupport** | `{boolean} false` | Whether hidden input fields should be appended to achieve native data handling. |\n\n## API methods\n\n| Name | Params | Description |\n| --- | --- | --- |\n| **open** |  | Opens the options list. |\n| **close** |  | Closes the options list. |\n| **select** | `option` | Selects an option based on its value. |\n| **deselect** | `option` | Deselects an option based on its value. |\n| **remove** | `option` | Alias for `deselect`. |\n| **selectAll** |  | Selects all options if mode is `tags` or `multiple`. |\n| **clear** |  | Deselects all selected options. |\n| **clearSearch** |  | Clears current search query. |\n| **refreshOptions** | `callback` | Refreshes async options list. |\n| **setPointer** | `option` | Points an option based on its value. |\n\n\nTo access API use `ref` on `Multiselect` component:\n``` html\n\u003cMultiselect\n  v-model=\"value\"\n  :options=\"options\"\n  ref=\"multiselect\"\n/\u003e\n```\n\n``` js\n// eg:\nmounted() {\n  this.$refs.multiselect.open()\n}\n```\n\nTo programmatically open and focus the multiselect, call `focus()` on the element:\n\n```js\nmounted() {\n  this.$refs.multiselect.$el.focus()\n}\n```\n\n\n## Events\n\n| Event | Attributes | Description |\n| --- | --- | --- |\n| **@change** | `value, select$` | Emitted after the value is changed. |\n| **@select** | `value, option, select$` | Emitted after an option or tag is selected. |\n| **@deselect** | `value, option, select$` | Emitted after an option is deselected or a tag is removed. |\n| **@open** | `select$` | Emitted after opening the option list. |\n| **@close** | `select$` | Emitted after closing the option list. |\n| **@search-change** | `query, select$` | Emitted after a character is typed. |\n| **@tag** | `query, select$` | **Deprecated 2.3.0: use `@create` instead**. Emitted after enter is hit when a new tag is being created. |\n| **@option** | `query, select$` | **Deprecated 2.6.0: use `@create` instead**. Emitted after enter is hit when a new option is being created. |\n| **@create** | `query, select$` | Emitted after enter is hit when a new option is being created. |\n| **@clear** | `select$` | Emitted when the options are cleared. |\n| **@paste** | `Event, select$` | Emitted when value is pasted into the search field. |\n| **@keydown** | `Event, select$` | Emitted on `keydown`. |\n| **@keyup** | `Event, select$` | Emitted on `keyup`. |\n| **@max** | `select$` | Emitted when `max` is reached when in `multiple` or `tags` mode. |\n\nThe `select$` param in each event is the Multiselect component's instance.\n\n## Slots\n\n| Slot | Attributes | Description |\n| --- | --- | --- |\n| **placeholder** | | Rendered as placeholder when the multiselect does not have value and `placeholder` prop is defined. |\n| **afterlist** | | Rendered after the options list. |\n| **beforelist** | | Rendered before the options list. |\n| **multiplelabel** | `values` | Rendered when using `multiple` mode and options are selected. By default it renders the return value of `multipleLabel` function. |\n| **nooptions** |  | Rendered when the options list is empty. By default renders `noOptionsText`. |\n| **noresults** |  | Rendered when there are no search results. By default renders `noResultsText`. |\n| **grouplabel** | `group, isPointed, isSelected` | Renders an option group label. The `isPointed` and `isSelected` props are function that used be used like `isPointed(option)` to determine the state. |\n| **option** | `option, isPointed, isSelected, search` | Renders an option in options list. The `isPointed` and `isSelected` props are function that used be used like `isPointed(option)` to determine the state. |\n| **singlelabel** | `value` | Rendered when using `single` mode and an option is selected. By default it renders the `:label` if the selected option. |\n| **tag** | `option, handleTagRemove, disabled` | Renders a tag when using `tags` mode. When `disabled` the remove icon should not be displayed. The `handleTagRemove` prop should be used to trigger the removal of the tag. |\n| **caret** | `handleCaretClick, isOpen` | Renders a small triangle on the right side of the multiselect. The content of the slot should have `pointer-events: false` when `isOpen: false` to replicate the original behaviour. |\n| **clear** | `clear` | Renders a remove icon if the multiselect has any value. The `clear` method should be used on `mousedown` event. |\n| **spinner** | | Renders a loader icon when async options are being fetched. |\n| **infinite** | | Renders a loader icon when infinite scroll is in progress. |\n\n\u003e Note: we don't use camelCase because they are [normalized back to lowercase](https://github.com/vuejs/vue/issues/9449#issuecomment-461170017) when written in DOM.\n\n## Styling\n\n### Styling with CSS vars\n\nThe following CSS variables can be used to customize multiselect when using `default.css`:\n\n``` css\n--ms-font-size: 1rem;\n--ms-line-height: 1.375;\n--ms-bg: #FFFFFF;\n--ms-bg-disabled: #F3F4F6;\n--ms-border-color: #D1D5DB;\n--ms-border-width: 1px;\n--ms-border-color-active: #D1D5DB;\n--ms-border-width-active: 1px;\n--ms-radius: 4px;\n--ms-py: 0.5rem;\n--ms-px: 0.875rem;\n--ms-ring-width: 3px;\n--ms-ring-color: #10B98130;\n--ms-placeholder-color: #9CA3AF;\n--ms-max-height: 10rem;\n\n--ms-spinner-color: #10B981;\n--ms-caret-color: #999999;\n--ms-clear-color: #999999;\n--ms-clear-color-hover: #000000;\n  \n--ms-tag-font-size: 0.875rem;\n--ms-tag-line-height: 1.25rem;\n--ms-tag-font-weight: 600;\n--ms-tag-bg: #10B981;\n--ms-tag-bg-disabled: #9CA3AF;\n--ms-tag-color: #FFFFFF;\n--ms-tag-color-disabled: #FFFFFF;\n--ms-tag-radius: 4px;\n--ms-tag-py: 0.125rem;\n--ms-tag-px: 0.5rem;\n--ms-tag-my: 0.25rem;\n--ms-tag-mx: 0.25rem;\n\n--ms-tag-remove-radius: 4px;\n--ms-tag-remove-py: 0.25rem;\n--ms-tag-remove-px: 0.25rem;\n--ms-tag-remove-my: 0rem;\n--ms-tag-remove-mx: 0.125rem;\n\n--ms-dropdown-bg: #FFFFFF;\n--ms-dropdown-border-color: #D1D5DB;\n--ms-dropdown-border-width: 1px;\n--ms-dropdown-radius: 4px;\n\n--ms-group-label-py: 0.3rem;\n--ms-group-label-px: 0.75rem;\n--ms-group-label-line-height: 1.375;\n--ms-group-label-bg: #E5E7EB;\n--ms-group-label-color: #374151;\n--ms-group-label-bg-pointed: #D1D5DB;\n--ms-group-label-color-pointed: #374151;\n--ms-group-label-bg-disabled: #F3F4F6;\n--ms-group-label-color-disabled: #D1D5DB;\n--ms-group-label-bg-selected: #059669;\n--ms-group-label-color-selected: #FFFFFF;\n--ms-group-label-bg-selected-pointed: #0c9e70;\n--ms-group-label-color-selected-pointed: #FFFFFF;\n--ms-group-label-bg-selected-disabled: #75cfb1;\n--ms-group-label-color-selected-disabled: #D1FAE5;\n\n--ms-option-font-size: 1rem;\n--ms-option-line-height: 1.375;\n--ms-option-bg-pointed: #FFFFFF;\n--ms-option-color-pointed: #1F2937;\n--ms-option-bg-selected: #10B981;\n--ms-option-color-selected: #FFFFFF;\n--ms-option-bg-disabled: #FFFFFF;\n--ms-option-color-disabled: #D1D5DB;\n--ms-option-bg-selected-pointed: #26C08E;\n--ms-option-color-selected-pointed: #FFFFFF;\n--ms-option-bg-selected-disabled: #FFFFFF;\n--ms-option-color-selected-disabled: #D1FAE5;\n--ms-option-py: 0.5rem;\n--ms-option-px: 0.75rem;\n\n--ms-empty-color: #4B5563;\n```\n\nOverride them globally:\n\n``` css\n:root {\n  --ms-tag-bg: #059669;\n  --ms-tag-color: #D1FAE5;\n  --ms-tag-radius: 9999px;\n  --ms-tag-font-weight: 400;\n}\n```\n\nOr on an instance level:\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  :options=\"options\"\n  class=\"multiselect-green\"\n/\u003e\n\n\u003cMultiselect\n  v-model=\"value\"\n  :options=\"options\"\n  class=\"multiselect-blue\"\n/\u003e\n```\n\n``` css\n.multiselect-green {\n  --ms-tag-bg: #D1FAE5;\n  --ms-tag-color: #059669;\n}\n\n.multiselect-blue {\n  --ms-tag-bg: #DBEAFE;\n  --ms-tag-color: #2563EB;\n}\n```\n\n### Styling with Tailwind CSS\n\nTo use `Multiselect` with Tailwind CSS first you need install `npm i -D mini-svg-data-uri` and add background images to `tailwind.config.js`:\n\n``` js\n// tailwind.config.js\n\nconst svgToDataUri = require('mini-svg-data-uri')\n\nmodule.exports = {\n  theme: {\n    extend: {\n      backgroundImage: (theme) =\u003e ({\n        'multiselect-caret': `url(\"${svgToDataUri(\n          `\u003csvg viewBox=\"0 0 320 512\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003cpath d=\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\"\u003e\u003c/path\u003e\u003c/svg\u003e`,\n        )}\")`,\n        'multiselect-spinner': `url(\"${svgToDataUri(\n          `\u003csvg viewBox=\"0 0 512 512\" fill=\"${theme('colors.green.500')}\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003cpath d=\"M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z\"\u003e\u003c/path\u003e\u003c/svg\u003e`,\n        )}\")`,\n        'multiselect-remove': `url(\"${svgToDataUri(\n          `\u003csvg viewBox=\"0 0 320 512\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003cpath d=\"M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z\"\u003e\u003c/path\u003e\u003c/svg\u003e`,\n        )}\")`,\n      })\n    },\n  }\n}\n```\n\nThen you need to import `themes/tailwind.css` to you main component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cMultiselect ... /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  // ...\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  @import '@vueform/multiselect/themes/tailwind.css';\n  /* or */\n  /* @import './path/to/node_modules/@vueform/multiselect/themes/tailwind.css'; */\n\u003c/style\u003e\n```\n\n#### Using `:classes` prop\n\nAlternatively you can define class names directly by passing them to the `Multiselect` component via `classes` property. When using this approach you don't need to import `tailwind.css`. Here's a default styling for Tailwind CSS (the same included in `tailwind.css`):\n\n```vue\n\u003cMultiselect ... :classes=\"{\n  container: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none',\n  containerDisabled: 'cursor-default bg-gray-100',\n  containerOpen: 'rounded-b-none',\n  containerOpenTop: 'rounded-t-none',\n  containerActive: 'ring ring-green-500 ring-opacity-30',\n  wrapper: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',\n  singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',\n  singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',\n  multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',\n  search: 'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',\n  tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',\n  tag: 'bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',\n  tagDisabled: 'pr-2 opacity-50 rtl:pl-2',\n  tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',\n  tagWrapperBreak: 'whitespace-normal break-all',\n  tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',\n  tagRemoveIcon: 'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',\n  tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',\n  tagsSearch: 'absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',\n  tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',\n  placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',\n  caret: 'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',\n  caretOpen: 'rotate-180 pointer-events-auto',\n  clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',\n  clearIcon: 'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',\n  spinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',\n  infinite: 'flex items-center justify-center w-full',\n  infiniteSpinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',\n  dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',\n  dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',\n  dropdownHidden: 'hidden',\n  options: 'flex flex-col p-0 m-0 list-none',\n  optionsTop: '',\n  group: 'p-0 m-0',\n  groupLabel: 'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',\n  groupLabelPointable: 'cursor-pointer',\n  groupLabelPointed: 'bg-gray-300 text-gray-700',\n  groupLabelSelected: 'bg-green-600 text-white',\n  groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',\n  groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',\n  groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',\n  groupOptions: 'p-0 m-0',\n  option: 'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',\n  optionPointed: 'text-gray-800 bg-gray-100',\n  optionSelected: 'text-white bg-green-500',\n  optionDisabled: 'text-gray-300 cursor-not-allowed',\n  optionSelectedPointed: 'text-white bg-green-500 opacity-90',\n  optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',\n  noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',\n  noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',\n  fakeInput: 'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',\n  assist: 'absolute -m-px w-px h-px overflow-hidden',\n  spacer: 'h-9 py-px box-content'\n}\" /\u003e\n```\n\nCertain classes has different states which are merged to the base class when the state is active. For example `dropdown` will be merged with `dropdownTop` when `open-direction: 'top'` resulting in the following classes:\n```absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b -translate-y-full top-px bottom-auto rounded-b-none rounded-t```\n\nThe same is true for `container`, `tag`, `options`, `groupLabel` and `option` classes.\n\nIn case you need to override the same type of utility you might use [@neojp/tailwind-important-variant](https://www.npmjs.com/package/@neojp/tailwindcss-important-variant) for eg. `bg-green-500!`.\n\n## Examples\n\n- [Single select](#single-select)\n- [Multiselect with object options](#multiselect-with-object-options)\n- [Multiselect with disabled options](#multiselect-with-disabled-options)\n- [Multiselect with groups](#multiselect-with-groups)\n- [Tags with search, create and array of objects options](#tags-with-search-create-and-array-of-objects-options)\n- [Autocomplete with async options](#autocomplete-with-async-options)\n- [Tags with async options](#tags-with-async-options)\n- [Select with custom options slot](#select-with-custom-options-slot)\n- [Multiselect with custom label slot](#multiselect-with-custom-label-slot)\n- [Tags with custom tags slot](#tags-with-custom-tags-slot)\n- [Async options with default values](#async-options-with-default-values)\n- [Default values that are not among the options](#default-values-that-are-not-among-the-options)\n- [Manage created tag asynchronously](#manage-created-tag-asynchronously)\n- [Load async options from API on open with infinite scroll](#load-async-options-from-api-on-open-with-infinite-scroll)\n\n### Single select\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  :options=\"['Batman', 'Robin', 'Joker']\"\n/\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #1\u003c/a\u003e\n\n### Multiselect with object options\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  mode=\"multiple\"\n  :close-on-select=\"false\"\n  :options=\"{\n    batman: 'Batman',\n    robin: 'Robin',\n    joker: 'Joker'\n  }\"\n/\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #2\u003c/a\u003e\n\n### Multiselect with disabled options\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  mode=\"multiple\"\n  :close-on-select=\"false\"\n  :options=\"[\n    { value: 'batman', label: 'Batman' },\n    { value: 'robin', label: 'Robin', disabled: true },\n    { value: 'joker', label: 'Joker' },\n  ]\"\n/\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #3\u003c/a\u003e\n\n### Multiselect with groups\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  mode=\"multiple\"\n  :close-on-select=\"false\"\n  :groups=\"true\"\n  :options=\"[\n    {\n      label: 'DC',\n      options: ['Batman', 'Robin', 'Joker'],\n    },\n    {\n      label: 'Marvel',\n      options: ['Spiderman', 'Iron Man', 'Captain America'],\n    },\n  ]\"\n/\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #4\u003c/a\u003e\n\n### Tags with search, create and array of objects options\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  mode=\"tags\"\n  :close-on-select=\"false\"\n  :searchable=\"true\"\n  :create-option=\"true\"\n  :options=\"[\n    { value: 'batman', label: 'Batman' },\n    { value: 'robin', label: 'Robin' },\n    { value: 'joker', label: 'Joker' },\n  ]\"\n/\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #5\u003c/a\u003e\n\n### Autocomplete with async options\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  placeholder=\"Choose a programming language\"\n  :filter-results=\"false\"\n  :min-chars=\"1\"\n  :resolve-on-load=\"false\"\n  :delay=\"0\"\n  :searchable=\"true\"\n  :options=\"async function(query) {\n    return await fetchLanguages(query) // check JS block in JSFiddle for implementation\n  }\"\n/\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #6\u003c/a\u003e\n\n### Tags with async options\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  mode=\"tags\"\n  placeholder=\"Choose your stack\"\n  :close-on-select=\"false\"\n  :filter-results=\"false\"\n  :min-chars=\"1\"\n  :resolve-on-load=\"false\"\n  :delay=\"0\"\n  :searchable=\"true\"\n  :options=\"async function(query, select$) {\n    return await fetchLanguages(query) // check JS block in JSFiddle for implementation\n  }\"\n/\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #7\u003c/a\u003e\n\n### Select with custom options slot\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  placeholder=\"Select your character\"\n  label=\"name\"\n  :options=\"[\n    { 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' },\n    { 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' },\n    { 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' },\n  ]\"\n\u003e\n  \u003ctemplate v-slot:singlelabel=\"{ value }\"\u003e\n    \u003cdiv class=\"multiselect-single-label\"\u003e\n      \u003cimg class=\"character-label-icon\" :src=\"value.icon\"\u003e {{ value.name }}\n    \u003c/div\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate v-slot:option=\"{ option }\"\u003e\n    \u003cimg class=\"character-option-icon\" :src=\"option.icon\"\u003e {{ option.name }}\n  \u003c/template\u003e\n\u003c/Multiselect\u003e\n\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #8\u003c/a\u003e\n\n### Multiselect with custom label slot\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  mode=\"multiple\"\n  placeholder=\"Select your characters\"\n  :close-on-select=\"false\"\n  :options=\"{\n    batman: 'Batman',\n    robin: 'Robin',\n    joker: 'Joker'\n  }\"\n\u003e\n  \u003ctemplate v-slot:multiplelabel=\"{ values }\"\u003e\n    \u003cdiv class=\"multiselect-multiple-label\"\u003e\n      {{ values.length }} characters selected\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/Multiselect\u003e\n\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #9\u003c/a\u003e\n\n### Tags with custom tags slot\n\n```vue\n\u003ctemplate\u003e\n  \u003cMultiselect\n    v-model=\"value\"\n    mode=\"tags\"\n    placeholder=\"Select employees\"\n    track-by=\"name\"\n    label=\"name\"\n    :close-on-select=\"false\"\n    :searchable=\"true\"\n    :options=\"[\n      { value: 'judy', name: 'Judy', image: 'https://randomuser.me/api/portraits/med/women/1.jpg' },\n      { value: 'jane', name: 'Jane', image: 'https://randomuser.me/api/portraits/med/women/2.jpg' },\n      { value: 'john', name: 'John', image: 'https://randomuser.me/api/portraits/med/men/1.jpg' },\n      { value: 'joe', name: 'Joe', image: 'https://randomuser.me/api/portraits/med/men/2.jpg' }\n    ]\"\n  \u003e\n      \u003ctemplate v-slot:tag=\"{ option, handleTagRemove, disabled }\"\u003e\n        \u003cdiv\n          class=\"multiselect-tag is-user\"\n          :class=\"{\n            'is-disabled': disabled\n          }\"\n        \u003e\n          \u003cimg :src=\"option.image\"\u003e\n          {{ option.name }}\n          \u003cspan\n            v-if=\"!disabled\"\n            class=\"multiselect-tag-remove\"\n            @click=\"handleTagRemove(option, $event)\"\n          \u003e\n            \u003cspan class=\"multiselect-tag-remove-icon\"\u003e\u003c/span\u003e\n          \u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/template\u003e\n  \u003c/Multiselect\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n  .multiselect-tag.is-user {\n    padding: 5px 8px;\n    border-radius: 22px;\n    background: #35495e;\n    margin: 3px 3px 8px;\n  }\n\n  .multiselect-tag.is-user img {\n    width: 18px;\n    border-radius: 50%;\n    height: 18px;\n    margin-right: 8px;\n    border: 2px solid #ffffffbf;\n  }\n\n  .multiselect-tag.is-user i:before {\n    color: #ffffff;\n    border-radius: 50%;;\n  }\n\n  .user-image {\n    margin: 0 6px 0 0;\n    border-radius: 50%;\n    height: 22px;\n  }\n\u003c/style\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #10\u003c/a\u003e\n\n\n### Async options with default values\n\nWhen using `resolveOnLoad: false` we can add default values with `object: true` and providing options as objects, containing both `label` and `value` props. This is because option list is not resolved when the component is mounted so Multiselect has no idea of what option labels should be if only plain values were provided.\n\n```vue\n\u003ctemplate\u003e\n  \u003cMultiselect\n    mode=\"tags\"\n    v-model=\"value\"\n    placeholder=\"Select options\"\n    :close-on-select=\"false\"\n    :searchable=\"true\"\n    :object=\"true\"\n    :resolve-on-load=\"false\"\n    :delay=\"0\"\n    :min-chars=\"1\"\n    :options=\"async (query) =\u003e {\n      return await fetchLanguages(query)\n    }\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data: () =\u003e ({\n    value: [\n      { value: 'Java', label: 'Java' },\n      { value: 'JavaScript', label: 'JavaScript' },\n    ]\n  })\n}\n\u003c/script\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #11\u003c/a\u003e\n\n\n### Default values that are not among the options using `object: true`\n\nIf we want to add default values without having to add them to options list we can use `object: true` and provide them as objects, containing both `label` and `value` props. This is because if a plain value is not among Multiselect options it has no idea of what option label should be.\n\n```vue\n\u003ctemplate\u003e\n  \u003cMultiselect\n    mode=\"tags\"\n    v-model=\"value\"\n    placeholder=\"Select options\"\n    :close-on-select=\"false\"\n    :searchable=\"true\"\n    :object=\"true\"\n    :resolve-on-load=\"false\"\n    :delay=\"0\"\n    :min-chars=\"1\"\n    :options=\"async (query) =\u003e {\n      return await fetchLanguages(query)\n    }\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data: () =\u003e ({\n    value: [\n      { value: 'Java', label: 'Java' },\n      { value: 'JavaScript', label: 'JavaScript' },\n    ]\n  })\n}\n\u003c/script\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #12\u003c/a\u003e\n\n\n### Default values that are not among the options using `allowAbsent: true`\n\nIf our async option list returns an **array of strings** we can use `allowAbsent: true` to allow value(s) which are not among the option list. The reason why this only works with an array of strings option list is because plain values like `Java` and `JavaScript` will use the same string for label and value.\n\n```vue\n\u003ctemplate\u003e\n  \u003cMultiselect\n    mode=\"tags\"\n    v-model=\"value\"\n    placeholder=\"Select options\"\n    :allow-absent=\"true\"\n    :close-on-select=\"false\"\n    :searchable=\"true\"\n    :resolve-on-load=\"false\"\n    :delay=\"0\"\n    :min-chars=\"1\"\n    :options=\"async (query) =\u003e {\n      return await fetchLanguages(query)\n    }\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data: () =\u003e ({\n    value: [\n      'Java',\n      'JavaScript',\n    ]\n  })\n}\n\u003c/script\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #13\u003c/a\u003e\n\n\n### Manage created tag asynchronously\n\nSearch is restricted by `regex` and tag creation is controlled by `onCreate(option, select$)`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cMultiselect\n    mode=\"tags\"\n    v-model=\"value\"\n    placeholder=\"Accepts numbers \u003c= 67 (delay: 1000ms)\"\n    :options=\"[]\"\n    :create-option=\"true\"\n    :searchable=\"true\"\n    :regex=\"/\\d/\"\n    :on-create=\"handleTagCreate\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  methods: {\n    handleTagCreate: async (option, select$) =\u003e {\n      // Do not allow create tags above 67\n      if (parseInt(option.value) \u003e 67) {\n        alert(`${option.value} is not allowed. Option must by \u003c= 67.`)\n\n        // If returns `false` the tag will not be added\n        return false\n      }\n\n      // Async request (eg. for validating)\n      await new Promise((resolve, reject) =\u003e {\n        setTimeout(() =\u003e {\n          resolve()\n        }, 1000)\n      })\n\n      // Modifying option label\n      option.label = option.label + ' - confirmed'\n\n      return option\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #14\u003c/a\u003e\n\n### Load async options from API on open with infinite scroll\n\nOptions are not loaded initially, only when the users clicks the dropdown the first time. It also virtualizes the option list with `infinite: true` even large list of options can be loaded.\n\n```vue\n\u003cMultiselect\n  v-model=\"value\"\n  mode=\"tags\"\n  placeholder=\"Choose your stack\"\n  :close-on-select=\"false\"\n  :filter-results=\"false\"\n  :min-chars=\"0\"\n  :resolve-on-load=\"false\"\n  :infinite=\"true\"\n  :limit=\"10\"\n  :clear-on-search=\"true\"\n  :delay=\"0\"\n  :searchable=\"true\"\n  :options=\"async (query) =\u003e {\n    return await fetchLanguages(query)\n  }\"\n  @open=\"(select$) =\u003e {\n    if (select$.noOptions) {\n      select$.resolveOptions()\n    }\n  }\"\n/\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #15\u003c/a\u003e\n\n### Multiselect with localized texts\n\nOptions are not loaded initially, only when the users clicks the dropdown the first time. It also virtualizes the option list with `infinite: true` even large list of options can be loaded.\n\n```vue\n\u003ctemplate\u003e\n  \u003cMultiselect\n    v-model=\"value\"\n    locale=\"de\"\n    fallback-locale=\"en\"\n    :options=\"[\n      { value: 1, label: { en: 'One', de: 'Eins' } },\n      { value: 2, label: { en: 'Two' } },\n      { value: 3, label: { es: 'Tres'} },\n      { value: 4, label: 'Four' },\n    ]\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data: () =\u003e ({\n    value: [1]\n  })\n}\n\u003c/script\u003e\n```\n\n\u003ca href=\"https://jsfiddle.net/xajub20o/\" target=\"_blank\"\u003eJSFiddle - Example #16\u003c/a\u003e\n\n## License\n\n[MIT](https://github.com/vueform/multiselect/blob/main/LICENSE.md)\n","funding_links":[],"categories":["Components \u0026 Libraries","Packages","JavaScript","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueform%2Fmultiselect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvueform%2Fmultiselect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueform%2Fmultiselect/lists"}