Blog Detail

23

Nov
A Collection of Top 10 Vue Select Box Components for Vue Js cover image

arrow_back A Collection of Top 10 Vue Select Box Components for Vue Js

Vue select components can control multiple selections. It’s equipped with multiple properties. The select box allows you to offer visitors a dropdown selection of options. This is helpful when creating an application or asking questions with a range of values. In this blog, I’ve collected some best Vue select components that you can easily utilize in your projects.

vue-select

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. These are the following features of Vue select.

  • 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
Download:

https://github.com/sagalbot/vue-select

Demo:

https://vue-select.org/sandbox.htmlt



@desislavsd/vue-select

@desislavsd/vue-select is a lightweight and mighty select component with a lot of features and customizable options. Following are the different features of this Vue select component.

  • Uses v-model
  • Single / Multiple selection
  • Tagging + custom key triggers
  • List Filtering / Searching
  • Support for async list source
  • Out of the box, AJAX support using fetch
  • Debounce AJAX requests
  • Transparent access to input attributes
  • Highly customizable
  • Zero dependencies
Download:

https://github.com/desislavsd/vue-select

Demo:

https://jsfiddle.net/desislavsd/es2n6py0/



vue-search-select

Vue-search-select is a Vue.js search select component with NO dependencies.

Download:

https://github.com/moreta/vue-search-select

Demo:

https://vue-search-select.netlify.com/



mikerodham/vue-dropdowns

A better way to display select boxes when using v-for on objects. This component needs no special dependencies, no jquery, no bootstrap, just VueJS, and CSS goodness.

Download:

https://github.com/mikerodham/vue-dropdowns

Demo:

https://mikerodham.github.io/vue-dropdowns/



Vue Cool Select

Vue Cool Select is a select with autocomplete, slots, bootstrap, and material design themes. It has many features.

  • props (30) allow you to customize a component in various ways
  • slots (13) allow content to be changed anywhere
  • events (8) will let you know about everything
  • autocomplete (you can use custom search, you can also disable the search input)
  • keyboard controls (not only through the arrows)
  • validation, state of error, and success
  • disabled and read-only
  • small and large sizes (as in bootstrap)
  • the ability to set your styles, you can write a theme from scratch. 2 themes: Bootstrap 4 (equal styles), Material Design
  • TypeScript support
  • tab navigation
  • SSR (Server-Side Rendering)
  • auto determine the suitable position for the menu if it goes beyond the viewport
Download:

https://github.com/iliyaZelenko/vue-cool-select

Demo:

https://iliyazelenko.github.io/vue-cool-select



vue-dynamic-select

A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

Download:

https://github.com/silasmontgomery/vue-dynamic-select



@alfsnd/vue-bootstrap-select

vue-bootstrap-select is a vue version of bootstrap select

Download:

https://github.com/Sandalf/vue-bootstrap-select

Demo:

https://codesandbox.io/s/ovq821j566



vue-selectize

vue-selectize is a Vanilla Vue.js component that mimics Selectize behavior with no jquery dependency.

Download:

https://github.com/isneezy/vue-selectize

Docs & Demo:

https://vue-selectize.vilanculo.me/



v-suggest

v-suggest is a Vue2 plugin for input content suggestions, support using the keyboard to navigate and quick pick, it makes user experience like search engine input element

Download:

https://github.com/TerryZ/v-suggest

Demo:

https://terryz.github.io/vue/#/suggest



vue-multi-select

This component gives you a multi/single select with the power of Vuejs components.

Download:

https://github.com/IneoO/vue-multi-select

Docs & Demo:

https://vue-multi-select.tuturu.io/

Published at : 23-11-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project