The current version is `3.x`, if you are looking for `2.x`, you can find [it here](README_2VERSION.md) (also, see [breaking changes](https://github.com/iliyaZelenko/vue-cool-select/blob/master/CHANGELOG.md#300-2019-09-18)).
# [Flexible select](https://iliyazelenko.github.io/vue-cool-select) [](https://twitter.com/intent/tweet?text=Vue%20select%20component%20with%20autocomplete,%20slots,%20bootstrap%20and%20material%20design%20themes.&url=https://github.com/iliyaZelenko/vue-cool-select&via=IlyaZelenko&hashtags=vue,bootstrap,developers,github,html,js,web,npm,material-design)
## [Demo + Documentation](https://iliyazelenko.github.io/vue-cool-select)
[](https://iliyazelenko.github.io/vue-cool-select)
## Features
- no dependencies
- props (30) allow you to customize a component in a 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)
- support on mobile devices
- validation, state of error and success
- disabled and readonly
- small and large sizes (as in bootstrap)
- the ability to set your styles, you can write 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
Write your suggestions, glad to add.
## Installation
`yarn add vue-cool-select` or `npm install --save vue-cool-select`
## Get started
### NPM
1. Import this plugin, css (theme) and add plugin via `Vue.use`:
```js
import { CoolSelectPlugin } from 'vue-cool-select'
// paste the line below only if you need "bootstrap" theme
import 'vue-cool-select/dist/themes/bootstrap.css'
// paste the line below only if you need "material-design" theme
import 'vue-cool-select/dist/themes/material-design.css'
// you can also import your theme
Vue.use(CoolSelectPlugin)
```
2. Use inside another component:
```js
import { CoolSelect } from 'vue-cool-select'
export default {
components: { CoolSelect },
data () {
return {
// simple example of items
items: ['Item 1', 'Item 2', 'Item 3'],
// there will be a selected item
selected: null
}
}
}
```
3. Add to ``:
```vue
```
### Browser (CDN)
Include vue-cool-select in the page.
```html
```
If Vue is detected in the Page, the plugin is installed automatically.
---
Documentation and examples [here](https://iliyazelenko.github.io/vue-cool-select).
#### TODO
- multi-select
- 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, thanks! :smile:
