vue-select

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

Vue Select is a feature rich select/dropdown/typeahead component. It provides a default template that fits most use cases for a filterable select dropdown. The component is designed to be as lightweight as possible, while maintaining high standards for accessibility, developer experience, and customization.

• Tagging
• Filtering / Searching
• Vuex Support
• AJAX Support
• SSR Support
• Accessible
• ~20kb Total / ~5kb CSS / ~15kb JS
• Select Single/Multiple Options
• Customizable with slots and SCSS variables
• Zero dependencies

Documentation

Complete documentation and examples available at https://vue-select.org.

• API Documentation
• CodePen Template

Sponsors 🎉

It takes a lot of effort to maintain this project. If it has saved you development time, please consider sponsoring the project with GitHub sponsors!

Huge thanks to the sponsors and contributors that make Vue Select possible!

Install

yarn add vue-select

# or use npm

npm install vue-select

Then, import and register the component:

import Vue from "vue";
import vSelect from "vue-select";

Vue.component("v-select", vSelect);

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

import "vue-select/dist/vue-select.css";

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

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

You can also include vue-select directly in the browser. Check out the documentation for loading from CDN..

License

MIT

Comments

• Vue 3 support

  Is your feature request related to a problem? Please describe. It would be great to have a working version for Vue 3.

  Describe the solution you'd like New version with Vue 3 support.

  Describe alternatives you've considered

  Additional context At the moment I can't even install the lib:

  vue-selec[email protected]" has incorrect peer dependency "[email protected]"

  ---

  Edited by @sagalbot: Vue 3 support is available on the beta release channel.

  Please see #1597 as the source of truth for the v4 / Vue 3 compatible release. Thanks! - @sagalbot

  npm install vue-select@beta
  

  yarn add vue-select@beta
  

  in progress vue 3 released on @beta 

  opened by koljada 94
• Fixing unexpected linebreak on single selects

  Fixes https://github.com/sagalbot/vue-select/issues/460

  What

  • Hiding the search input field if the component is in the single value option.
  • Making the search input field full width if no options are selected in either single or multi select mode.
  • Shrinking it to width auto if there are selected entries in multi mode.

  Why

  Before:

  After:

  Reason for being broken:

  The component broke into two lines when selecting a a value in single mode, because an empty, non-interactable input field was pushed down to the next row if the selected entry had a long label.

  PS not sure if I did something weird with the indentation in the spec file?

  high priority 

  opened by eriknygren 43
• Vue 2.0 compatibility

  Hey,

  Tried this plugin in vue 2.0 rc4, and it fails, when do you plan to release select for 2.0, only then 2.0 goes stable?

  As you can guess, it fails on filters.

  I tooked a look at your component and I think that for proper work we only have to change

  let options = this.$options.filters.filterBy(this.options, this.search)
  

  question vue 2.0 

  opened by san4io 40
• Feature/index prop

  Proposal to solve #122 (Option to specify id property / selected key). A few tests have been added to make sure the pre-existent features won't break when the new one is active.

  feature request in progress RFC 

  opened by SimoTod 31
• Option to specify `id` property / selected key

  Hello,

  There's :label prop to specify which option object property should be used as a label, but I can't find how to specify the actual value property. Right now the v-model is set to the whole object.

  Is there a way to specify to set the result value of object property?

  Thanks

  enhancement feature request 

  opened by sellvana 27
• Auto close when clicking outside does not work if option already selected

  Hi,

  if you choose an option, after that expand the select and try to click outside de select so it would close, it does not close. you have to choose a new option or the same to reset the select.

  opened by ghost 24
• v-model with reduce if value changed outside v-select

  Describe the bug When using v-model with reduce and changing v-model value in vue component v-select value is not updated. Input event not emitted.

  To Reproduce Pick any value from dropdown Press reset button https://codepen.io/anon/pen/PgyLXz

  <div id="app">
    <h1>Vue Select</h1>
    <v-select v-model="selectedValue" 
              :options="options"
              :reduce="option => option.val">
    </v-select>
    <button @click="resetDropdown">reset</button>
  </div>
  
  <script src="https://unpkg.com/vue@latest"></script>
  <script src="https://unpkg.com/vue-select@latest"></script>
  

  Vue.component('v-select', VueSelect.VueSelect)
  
  new Vue({
    el: '#app',
    data: {
        selectedValue: null,
        options: [
          { label: "one", val: 1 },
          { label: "two", val: 2 },
          { label: "three", val: 3 }
        ]
    },
     methods: {
      resetDropdown() {
        this.selectedValue = null;
      }
    },
    updated() {
      console.log(this.selectedValue);
    }
  })
  

  Expected behavior V-select value is changed with associated v-model variable. input event emitted

  bug 

  opened by fretfan 23
• Make sure selected value is an option after option changed and react to value property changes even if tracking value internally

  Before this case did not work correctly:

  • Select was rendered with no options, but with a saved value
  • Options were fetched by ajax and options prop was updated
  • Reduce function is passed

  What happens without this commit is that the selected tracked value simply was the raw reduced value (previously saved). Which means that displaying a label for example does not work if the label comes from the unreduced option.

  This commit makes sure that the internal tracked value is checked against all options not only once the select is created but additionally when options change.

  ---

  To test this in your project, you can use my custom branch which incoperates this PR and #921 and has built packages.

  Disclaimer: Not for production use, only provided for testing purposes. Might be bugged and eat your data.

  In your package.json:

  "dependencies": {
      "vue-select": "https://github.com/doits/vue-select.git#fix_initial_label_on_ajax_options_built"
  }
  

  in progress 

  opened by doits 22
• option and selected-option can be templated

  Thx for your great implementation!

  I have made the following addition so options and selected-options can be templated, which is I think the underlying request of issue #193.

  The following example from "dev.html" show a list of countries:

  <v-select placeholder="custom option template" :options="options" multiple>
  

  The changes I have made to vue-select make to following possible (showing the flags of the countries):

  <v-select placeholder="custom option template" :options="options" multiple>
    <template slot="selected-option" scope="option">
      <img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/> 
        {{option.label}}
    </template>
    <template slot="option" scope="option">
      <img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/> 
        {{option.label}} ({{option.value}})
      </template>
  </v-select>
  

  (if you happen to have a better link to country flags, just change the urls...)

  Best regards,

  Edwin

  enhancement ui 

  opened by edwindj 22
• Select Same Option Twice

  A user is able to select the duplicate options on multiple selects.

  

  • likely related to the new index feature
  • items in the dropdown list are not being highlighted
  • clicking the same option twice in a row will result in expected behavior
  • arrays of strings are unaffected

  bug 

  opened by sagalbot 21
• Clicking the option I've previously selected clears the select

  Whenever I click the same option that was selected before, vue-select clears the selection, which is a behavior you rarely see in a real select tag (and breaks my app as an option is always required).

  The more common behavior would be ... nothing happening if I clicked the same thing I had selected before.

  Is there any way to solve this?

  

  opened by sergiocastrovale 21
• appendToBody issue when used in b-table inside b-modal

  • Vue Version: 2
  • Vue Select Version: 3.20.2
  • bootstrap-vue: 2.21.1

  Describe the bug Option list hidden when appendToBody applied when used in b-table inside b-modal

  Reproduction Link

  Steps To Reproduce

  1. Place v-select in b-table in b-modal
  2. append-to-body=true
  3. Show hidden b-modals

  Expected behavior No list of options displayed

  Screenshots

  bug 

  opened by choiDoYoung 0
• chore(deps): bump express from 4.17.1 to 4.18.2 in /docs

  Bumps express from 4.17.1 to 4.18.2.

  Release notes

  Sourced from express's releases.

  4.18.2

  • Fix regression routing a large stack in a single route
  • deps: [email protected]
    • deps: [email protected]
    • perf: remove unnecessary object clone
  • deps: [email protected]

  4.18.1

  • Fix hanging on large stack of sync routes

  4.18.0

  • Add "root" option to res.download
  • Allow options without filename in res.download
  • Deprecate string and non-integer arguments to res.status
  • Fix behavior of null/undefined as maxAge in res.cookie
  • Fix handling very large stacks of sync middleware
  • Ignore Object.prototype values in settings through app.set/app.get
  • Invoke default with same arguments as types in res.format
  • Support proper 205 responses using res.send
  • Use http-errors for res.format error
  • deps: [email protected]
    • Fix error message for json parse whitespace in strict
    • Fix internal error when inflated body exceeds limit
    • Prevent loss of async hooks context
    • Prevent hanging when request already read
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
  • deps: [email protected]
    • Add priority option
    • Fix expires option to reject invalid dates
  • deps: [email protected]
    • Replace internal eval usage with Function constructor
    • Use instance methods on process to check for listeners
  • deps: [email protected]
    • Remove set content headers that break response
    • deps: [email protected]
    • deps: [email protected]
  • deps: [email protected]
    • Prevent loss of async hooks context
  • deps: [email protected]
  • deps: [email protected]
    • Fix emitted 416 error missing headers property
    • Limit the headers removed for 304 response
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]

  ... (truncated)

  Changelog

  Sourced from express's changelog.

  4.18.2 / 2022-10-08

  • Fix regression routing a large stack in a single route
  • deps: [email protected]
    • deps: [email protected]
    • perf: remove unnecessary object clone
  • deps: [email protected]

  4.18.1 / 2022-04-29

  • Fix hanging on large stack of sync routes

  4.18.0 / 2022-04-25

  • Add "root" option to res.download
  • Allow options without filename in res.download
  • Deprecate string and non-integer arguments to res.status
  • Fix behavior of null/undefined as maxAge in res.cookie
  • Fix handling very large stacks of sync middleware
  • Ignore Object.prototype values in settings through app.set/app.get
  • Invoke default with same arguments as types in res.format
  • Support proper 205 responses using res.send
  • Use http-errors for res.format error
  • deps: [email protected]
    • Fix error message for json parse whitespace in strict
    • Fix internal error when inflated body exceeds limit
    • Prevent loss of async hooks context
    • Prevent hanging when request already read
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
  • deps: [email protected]
    • Add priority option
    • Fix expires option to reject invalid dates
  • deps: [email protected]
    • Replace internal eval usage with Function constructor
    • Use instance methods on process to check for listeners
  • deps: [email protected]
    • Remove set content headers that break response
    • deps: [email protected]
    • deps: [email protected]
  • deps: [email protected]
    • Prevent loss of async hooks context
  • deps: [email protected]
  • deps: [email protected]

  ... (truncated)

  Commits

  • 8368dc1 4.18.2
  • 61f4049 docs: replace Freenode with Libera Chat
  • bb7907b build: [email protected]
  • f56ce73 build: [email protected]
  • 24b3dc5 deps: [email protected]
  • 689d175 deps: [email protected]
  • 340be0f build: [email protected]
  • 33e8dc3 docs: use Node.js name style
  • 644f646 build: [email protected]
  • ecd7572 build: [email protected]
  • Additional commits viewable in compare view

  
  

  

  Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

  ---

  Dependabot commands and options

  
  

  You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

  You can disable automated security fix PRs for this repo from the Security Alerts page.

  dependencies 

  opened by dependabot[bot] 0
• chore(deps): bump express from 4.17.1 to 4.18.2

  Bumps express from 4.17.1 to 4.18.2.

  Release notes

  Sourced from express's releases.

  4.18.2

  • Fix regression routing a large stack in a single route
  • deps: [email protected]
    • deps: [email protected]
    • perf: remove unnecessary object clone
  • deps: [email protected]

  4.18.1

  • Fix hanging on large stack of sync routes

  4.18.0

  • Add "root" option to res.download
  • Allow options without filename in res.download
  • Deprecate string and non-integer arguments to res.status
  • Fix behavior of null/undefined as maxAge in res.cookie
  • Fix handling very large stacks of sync middleware
  • Ignore Object.prototype values in settings through app.set/app.get
  • Invoke default with same arguments as types in res.format
  • Support proper 205 responses using res.send
  • Use http-errors for res.format error
  • deps: [email protected]
    • Fix error message for json parse whitespace in strict
    • Fix internal error when inflated body exceeds limit
    • Prevent loss of async hooks context
    • Prevent hanging when request already read
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
  • deps: [email protected]
    • Add priority option
    • Fix expires option to reject invalid dates
  • deps: [email protected]
    • Replace internal eval usage with Function constructor
    • Use instance methods on process to check for listeners
  • deps: [email protected]
    • Remove set content headers that break response
    • deps: [email protected]
    • deps: [email protected]
  • deps: [email protected]
    • Prevent loss of async hooks context
  • deps: [email protected]
  • deps: [email protected]
    • Fix emitted 416 error missing headers property
    • Limit the headers removed for 304 response
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]

  ... (truncated)

  Changelog

  Sourced from express's changelog.

  4.18.2 / 2022-10-08

  • Fix regression routing a large stack in a single route
  • deps: [email protected]
    • deps: [email protected]
    • perf: remove unnecessary object clone
  • deps: [email protected]

  4.18.1 / 2022-04-29

  • Fix hanging on large stack of sync routes

  4.18.0 / 2022-04-25

  • Add "root" option to res.download
  • Allow options without filename in res.download
  • Deprecate string and non-integer arguments to res.status
  • Fix behavior of null/undefined as maxAge in res.cookie
  • Fix handling very large stacks of sync middleware
  • Ignore Object.prototype values in settings through app.set/app.get
  • Invoke default with same arguments as types in res.format
  • Support proper 205 responses using res.send
  • Use http-errors for res.format error
  • deps: [email protected]
    • Fix error message for json parse whitespace in strict
    • Fix internal error when inflated body exceeds limit
    • Prevent loss of async hooks context
    • Prevent hanging when request already read
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
    • deps: [email protected]
  • deps: [email protected]
    • Add priority option
    • Fix expires option to reject invalid dates
  • deps: [email protected]
    • Replace internal eval usage with Function constructor
    • Use instance methods on process to check for listeners
  • deps: [email protected]
    • Remove set content headers that break response
    • deps: [email protected]
    • deps: [email protected]
  • deps: [email protected]
    • Prevent loss of async hooks context
  • deps: [email protected]
  • deps: [email protected]

  ... (truncated)

  Commits

  • 8368dc1 4.18.2
  • 61f4049 docs: replace Freenode with Libera Chat
  • bb7907b build: [email protected]
  • f56ce73 build: [email protected]
  • 24b3dc5 deps: [email protected]
  • 689d175 deps: [email protected]
  • 340be0f build: [email protected]
  • 33e8dc3 docs: use Node.js name style
  • 644f646 build: [email protected]
  • ecd7572 build: [email protected]
  • Additional commits viewable in compare view

  
  

  

  Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

  ---

  Dependabot commands and options

  
  

  You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

  You can disable automated security fix PRs for this repo from the Security Alerts page.

  dependencies 

  opened by dependabot[bot] 0
• chore(deps): bump qs from 6.5.2 to 6.5.3 in /docs

  Bumps qs from 6.5.2 to 6.5.3.

  Changelog

  Sourced from qs's changelog.

  6.5.3

  • [Fix] parse: ignore __proto__ keys (#428)
  • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
  • [Fix] correctly parse nested arrays
  • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
  • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
  • [Fix] when parseArrays is false, properly handle keys ending in []
  • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
  • [Fix] utils.merge: avoid a crash with a null target and an array source
  • [Refactor] utils: reduce observable [[Get]]s
  • [Refactor] use cached Array.isArray
  • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
  • [Refactor] parse: only need to reassign the var once
  • [Robustness] stringify: avoid relying on a global undefined (#427)
  • [readme] remove travis badge; add github actions/codecov badges; update URLs
  • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
  • [Docs] Clarify the need for "arrayLimit" option
  • [meta] fix README.md (#399)
  • [meta] add FUNDING.yml
  • [actions] backport actions from main
  • [Tests] always use String(x) over x.toString()
  • [Tests] remove nonexistent tape option
  • [Dev Deps] backport from main

  Commits

  • 298bfa5 v6.5.3
  • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
  • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
  • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
  • 12ac1c4 [meta] fix README.md (#399)
  • 0338716 [actions] backport actions from main
  • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
  • 51b8a0b add FUNDING.yml
  • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
  • f814a7f [Dev Deps] backport from main
  • Additional commits viewable in compare view

  
  

  

  Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

  ---

  Dependabot commands and options

  
  

  You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

  You can disable automated security fix PRs for this repo from the Security Alerts page.

  dependencies 

  opened by dependabot[bot] 0
• chore(deps): bump qs from 6.5.2 to 6.5.3

  Bumps qs from 6.5.2 to 6.5.3.

  Changelog

  Sourced from qs's changelog.

  6.5.3

  • [Fix] parse: ignore __proto__ keys (#428)
  • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
  • [Fix] correctly parse nested arrays
  • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
  • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
  • [Fix] when parseArrays is false, properly handle keys ending in []
  • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
  • [Fix] utils.merge: avoid a crash with a null target and an array source
  • [Refactor] utils: reduce observable [[Get]]s
  • [Refactor] use cached Array.isArray
  • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
  • [Refactor] parse: only need to reassign the var once
  • [Robustness] stringify: avoid relying on a global undefined (#427)
  • [readme] remove travis badge; add github actions/codecov badges; update URLs
  • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
  • [Docs] Clarify the need for "arrayLimit" option
  • [meta] fix README.md (#399)
  • [meta] add FUNDING.yml
  • [actions] backport actions from main
  • [Tests] always use String(x) over x.toString()
  • [Tests] remove nonexistent tape option
  • [Dev Deps] backport from main

  Commits

  • 298bfa5 v6.5.3
  • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
  • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
  • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
  • 12ac1c4 [meta] fix README.md (#399)
  • 0338716 [actions] backport actions from main
  • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
  • 51b8a0b add FUNDING.yml
  • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
  • f814a7f [Dev Deps] backport from main
  • Additional commits viewable in compare view

  
  

  

  Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

  ---

  Dependabot commands and options

  
  

  You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

  You can disable automated security fix PRs for this repo from the Security Alerts page.

  dependencies 

  opened by dependabot[bot] 0

Releases(v3.20.2)

• v3.20.2(Dec 17, 2022)

  3.20.2 (2022-12-17)

  Bug Fixes

  • 1735: use keypress event for space (#1736) (795feab)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.31 KB)
  vue-select.css.map(14.27 KB)
  vue-select.js(20.76 KB)
  vue-select.js.map(78.16 KB)
  

• v3.20.1(Dec 16, 2022)

  3.20.1 (2022-12-16)

  Bug Fixes

  • Keep focus on input after select to improve accessibility (#1727) (26f0827)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.31 KB)
  vue-select.css.map(14.27 KB)
  vue-select.js(20.64 KB)
  vue-select.js.map(77.74 KB)
  

• v4.0.0-beta.6(Nov 8, 2022)

  4.0.0-beta.6 (2022-11-08)

  Bug Fixes

  • css exports for webpack (#1696) (1867e29)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.30 KB)
  vue-select.es.js(24.14 KB)
  vue-select.umd.js(18.48 KB)
  

• v4.0.0-beta.5(Aug 24, 2022)

  4.0.0-beta.5 (2022-08-24)

  Bug Fixes

  • #1679: css file not being exported by package.json (06414c3), closes #1679

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.30 KB)
  vue-select.es.js(24.14 KB)
  vue-select.umd.js(18.48 KB)
  

• v4.0.0-beta.4(Aug 23, 2022)

  4.0.0-beta.4 (2022-08-23)

  Bug Fixes

  • force to run in vue3 mode when using @vue/compat (#1668) (e1bfaee)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.30 KB)
  vue-select.es.js(24.14 KB)
  vue-select.umd.js(18.48 KB)
  

• v3.20.0(Jul 17, 2022)

  3.20.0 (2022-07-17)

  Features

  • add input-background css variable (#1650) (f69a026)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.31 KB)
  vue-select.css.map(14.27 KB)
  vue-select.js(20.57 KB)
  vue-select.js.map(77.18 KB)
  

• v3.18.3(Feb 19, 2022)

  3.18.3 (2022-02-19)

  Bug Fixes

  • don't allow empty strings to be selected (#1595) (93c479e)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.26 KB)
  vue-select.css.map(14.19 KB)
  vue-select.js(20.47 KB)
  vue-select.js.map(77.02 KB)
  

• v4.0.0-beta.3(Feb 18, 2022)

  4.0.0-beta.3 (2022-02-18)

  Features

  • merge upstream into beta channel (#1589) (ff28068)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.26 KB)
  vue-select.css.map(14.19 KB)
  vue-select.js(22.19 KB)
  vue-select.js.map(70.22 KB)
  

• v3.18.2(Feb 18, 2022)

  3.18.2 (2022-02-18)

  Bug Fixes

  • allow selecting boolean values (#1518) (a1944e0)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.26 KB)
  vue-select.css.map(14.19 KB)
  vue-select.js(20.46 KB)
  vue-select.js.map(76.95 KB)
  

• v3.18.1(Feb 18, 2022)

  3.18.1 (2022-02-18)

  Bug Fixes

  • allow typeAheadSelect only when option is selectable (#1529) (115f24a)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.26 KB)
  vue-select.css.map(14.19 KB)
  vue-select.js(20.46 KB)
  vue-select.js.map(76.91 KB)
  

• v3.18.0(Feb 17, 2022)

  3.18.0 (2022-02-17)

  Features

  • deprecate sass, convert to css (#1531) (1ecf71a)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(7.26 KB)
  vue-select.css.map(14.19 KB)
  vue-select.js(20.44 KB)
  vue-select.js.map(76.86 KB)
  

• v3.17.0(Feb 17, 2022)

  3.17.0 (2022-02-17)

  Features

  • set pointer to most recent selected option on open (#1574) (5c09d6f)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.50 KB)
  vue-select.css.map(5.88 KB)
  vue-select.js(20.88 KB)
  vue-select.js.map(79.60 KB)
  

• v4.0.0-beta.2(Jan 4, 2022)

  4.0.0-beta.2 (2022-01-04)

  Bug Fixes

  • vue3: migrate refs array (#1534) (484a7b4)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.50 KB)
  vue-select.css.map(5.88 KB)
  vue-select.js(22.40 KB)
  vue-select.js.map(71.43 KB)
  

• v4.0.0-beta.1(Oct 20, 2021)

  4.0.0-beta.1 (2021-10-20)

  Features

  • Vue 3 Support (#1344) (06177a4)

  BREAKING CHANGES

  • drop vue 2 support

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.50 KB)
  vue-select.css.map(5.88 KB)
  vue-select.js(22.38 KB)
  vue-select.js.map(71.32 KB)
  

• v3.16.0(Oct 20, 2021)

  3.16.0 (2021-10-20)

  Features

  • add $vs-component-bg to sass variables (#1528) (129bfd7), closes #1490

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.50 KB)
  vue-select.css.map(5.88 KB)
  vue-select.js(20.60 KB)
  vue-select.js.map(78.86 KB)
  

• v3.15.1(Oct 18, 2021)

  3.15.1 (2021-10-18)

  Bug Fixes

  • vs__selected position set to absolute while loading with empty search value (#1396) (b7d1f70)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.50 KB)
  vue-select.css.map(5.88 KB)
  vue-select.js(20.66 KB)
  vue-select.js.map(78.95 KB)
  

• v3.15.0(Oct 17, 2021)

  3.15.0 (2021-10-17)

  Features

  • move uid to props @TheJaredWilcurt (#1362) (bf8be2e)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.46 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(20.66 KB)
  vue-select.js.map(78.96 KB)
  

• v3.14.0(Oct 17, 2021)

  3.14.0 (2021-10-17)

  Features

  • add deselectFromDropdown boolean prop @andreasvirkus (#1033) (68da1c1)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.46 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(20.61 KB)
  vue-select.js.map(78.73 KB)
  

• v3.13.3(Oct 15, 2021)

  3.13.3 (2021-10-15)

  Bug Fixes

  • always set cursor CSS property, not just on hover (#1517) (d4c7be4)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.41 KB)
  vue-select.css.map(5.77 KB)
  vue-select.js(20.29 KB)
  vue-select.js.map(77.60 KB)
  

• v3.13.2(Oct 6, 2021)

  3.13.2 (2021-10-06)

  Bug Fixes

  • autoscroll should scroll to item when opening dropdown (#1513) (766a2cb)

  Full Changelog: https://github.com/sagalbot/vue-select/compare/v3.13.1...v3.13.2

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.41 KB)
  vue-select.css.map(5.77 KB)
  vue-select.js(20.29 KB)
  vue-select.js.map(77.60 KB)
  

• v3.13.1(Oct 6, 2021)

  3.13.1 (2021-10-06)

  Bug Fixes

  • filtering: transform letters to locale specific cases (#1511) (b965b3b)

  New Contributors

  • @yoktav made their first contribution in https://github.com/sagalbot/vue-select/pull/1511

  Full Changelog: https://github.com/sagalbot/vue-select/compare/v3.13.0...v3.13.1

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.41 KB)
  vue-select.css.map(5.77 KB)
  vue-select.js(20.19 KB)
  vue-select.js.map(77.38 KB)
  

• v3.13.0(Aug 26, 2021)

  3.13.0 (2021-08-26)

  Features

  • add vs--multiple state class for multiselects (#1484) (4230bba)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.41 KB)
  vue-select.css.map(5.77 KB)
  vue-select.js(20.17 KB)
  vue-select.js.map(77.37 KB)
  

• v3.12.3(Aug 23, 2021)

  3.12.3 (2021-08-23)

  Bug Fixes

  • use click instead of mousedown event, fixes iOS bug (#1248) (58905e1), closes #814 #815

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.41 KB)
  vue-select.css.map(5.77 KB)
  vue-select.js(20.15 KB)
  vue-select.js.map(77.31 KB)
  

• v3.12.2(Jul 30, 2021)

  3.12.2 (2021-07-30)

  Bug Fixes

  • set !default for $vs-controls-deselect-text-shadow (#1468) (0f763f3)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.47 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(20.15 KB)
  vue-select.js.map(74.78 KB)
  

• v3.12.1(Jul 22, 2021)

  3.12.1 (2021-07-22)

  Bug Fixes

  • no-options slot should use mutableLoading instead of loading prop (#1465) (5e1ac1f)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.47 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(20.15 KB)
  vue-select.js.map(74.78 KB)
  

• v3.12.0(Jul 22, 2021)

  3.12.0 (2021-07-22)

  Features

  • add dropdownShouldOpen prop (#1464) (1676947)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.47 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(20.14 KB)
  vue-select.js.map(74.77 KB)
  

• v3.11.2(Dec 19, 2020)

  3.11.2 (2020-12-19)

  Bug Fixes

  • don't attempt to blur/focus search element if it doesn't exist (#1340) (876992b)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.47 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(20.04 KB)
  vue-select.js.map(74.36 KB)
  

• v3.11.1(Dec 18, 2020)

  3.11.1 (2020-12-18)

  Bug Fixes

  • Add tabindex="-1" to dropdown-menu to prevent scrollbars receiving focus (#1304) (e1e185d)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.47 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(20.00 KB)
  vue-select.js.map(74.31 KB)
  

• v3.11.0(Dec 18, 2020)

  3.11.0 (2020-12-18)

  Features

  • option selection events (#1324) (6e1c0db)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.47 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(19.98 KB)
  vue-select.js.map(74.27 KB)
  

• v3.10.8(Aug 11, 2020)

  3.10.8 (2020-08-11)

  Bug Fixes

  • search-slot: use computed property as reference to search el (#1254) (8ccd336)

  Source code(tar.gz)
  Source code(zip)
  vue-select.css(4.47 KB)
  vue-select.css.map(5.85 KB)
  vue-select.js(19.85 KB)
  vue-select.js.map(74.03 KB)
  

Owner

Jeff Sagal

Loves shipping stuff to the web. Big fan of tailwindcss, vue, laravel, etc.

GitHub https://vue-select.org

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 (

25 Sep 12, 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

27 Dec 27, 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

51 Jul 23, 2020

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

62 Dec 22, 2021

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.

12 Jan 1, 2023

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

96 Dec 27, 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

1.2k Jan 9, 2023

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

6.3k Dec 30, 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

2.6k Jan 1, 2023

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

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

348 Dec 26, 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

72 Dec 17, 2022

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

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

556 Dec 27, 2022

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

6.3k Dec 30, 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

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

38 Nov 24, 2022

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

17 Sep 18, 2022

A vue version of bootstrap select

@alfsnd/vue-bootstrap-select A vue version of bootstrap select Demo Install npm install @alfsnd/vue-bootstrap-select --save Usage import VSelect from

46 Nov 24, 2022

An vue select components，vselect是基于vue编写的select组件

vselect An vue select components Demo Live Demo Installation： npm install --save-dev vselect-component How to use 1、To include this project you need t

5 Jan 17, 2021