Everything you wish the HTML
<select>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.
- Filtering / Searching
- Vuex Support
- AJAX Support
- SSR Support
- ~20kb Total / ~5kb CSS / ~15kb JS
- Select Single/Multiple Options
- Customizable with slots and SCSS variables
- Zero dependencies
Complete documentation and examples available at https://vue-select.org.
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!
Vue 3 support is on the
vue-select@beta, and will become the new default when
v4is released. See #1579 for more details!
Vue 3 / Vue Select 4.x-beta
yarn add vue-select@beta # or use npm npm install vue-select@beta
Vue 2 / Vue Select 3.x
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:
You can also include vue-select directly in the browser. Check out the documentation for loading from CDN..