Select with autocomplete, slots, bootstrap and material design themes.

Form

Documentation

Coverage Downloads Version License CircleCI Build Status Language grade: JavaScript codebeat badge codebeat badge

Flexible select Tweet

Demo + Documentation

Features

  • 2 themes: Bootstrap 4, Material Design
  • autocomplete (you can use custom search)
  • control through arrows
  • slots (13)
  • events (7)
  • props (24)
  • loading indicator (helpful for REST requests)
  • validation
  • support on mobile devices
  • disabled and readonly

Write your suggestions, glad to add.

Installation

yarn add vue-cool-select or npm install --save vue-cool-select

Get started

  1. Import and select a theme:
import VueSelect from 'vue-cool-select'  Vue.use(VueSelect, {   theme: 'bootstrap' // or 'material-design' })
  1. Use inside inside another component:
import { CoolSelect } from 'vue-cool-select'  export default {   components: { CoolSelect },   data () {     return {       items: [...],       selected: null     }   } }
  1. Add to <template>:
<cool-select   v-model="selected"   :items="items" />

Documentation and examples here.

TODO

  • multi-select
  • rebuild build system (rollup)
  • 100% tests coverage

I am happy to add something or improve, you can write what you want to see. I also have more motivation to work if you give a star.


You May Also Like