Vue select checkbox

A native Vue.js component that provides the functionality of vue-select with the addition of checkboxes to the dropdown menu.

Version: 1.1.1 Updated: 10/03/2017

By: RonyNasr License: MIT

Downloads Last 30 Days: 103

vue-select Build Status Code Score Code Coverage No Dependencies MIT License Current Release

A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.


  • AJAX Support
  • Tagging
  • List Filtering/Searching
  • Supports Vuex
  • Select Single/Multiple Options
  • Tested with Bootstrap 3/4, Bulma, Foundation
  • +95% Test Coverage
  • ~33kb minified with CSS
  • Zero dependencies



Vue Compatibility
  • vue ~2.0 use vue-select ~2.0
  • vue ~1.0 use vue-select ~1.0


Install the package. You should install vue-select@1.3.3 for use with vue ~1.0.

$ npm install vue-select

Register the component

import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)

You may now use the component in your markup

<v-select v-model="selected" :options="['foo','bar']"></v-select>


Just include vue & vue-select.js - I recommend using unpkg.

<script src=""></script>
<!-- use the latest release -->
<script src=""></script>
<!-- or point to a specific release -->
<script src=""></script>

Then register the component in your javascript:

Vue.component('v-select', VueSelect.VueSelect);

You may now use the component in your markup

<v-select v-model="selected" :options="['foo','bar']"></v-select>

Here's an example on JSBin.

Basic Usage

Syncing a Selected Value

The most common use case for vue-select is to have the chosen value synced with a parent component. vue-select takes advantage of the v-model syntax to sync values with a parent.

<v-select v-model="selected"></v-select>
new Vue({
  data: {
    selected: null

Setting Options

vue-select accepts arrays of strings and objects to use as options through the options prop.

<v-select :options="['foo','bar']"></v-select>

When provided an array of objects, vue-select will display a single value of the object. By default, vue-select will look for a key named 'label' on the object to use as display text.

<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>

Using Checkboxes in your dropdown menu

vue-select-checkbox gives u the ability to add use checkboxes in your dropdown menby by setting the prop checkboxed to true (false by default)

For more information, please visit the vue-select documentation.

Categories: Vue js