# [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)
## Features
- 2 themes: Bootstrap 4 (equal styles), Material Design
- autocomplete (you can use custom search)
- keyboard controls (not only through the arrows)
- slots (13) allow content to be changed anywhere
- events (7) will let you know about everything
- props (24) allow you to customize a component in a variety of ways
- loading indicator (helpful for REST requests)
- validation, state of error and success
- support on mobile devices
- disabled and readonly
- smile and large sizes (as in bootstrap)
- ability to set styles for a component
- TypeScript support
Write your suggestions, glad to add.
## Installation
`yarn add vue-cool-select@^2.0.0` or `npm install --save vue-cool-select@^2.0.0`
## Get started
1. Import and select a theme:
```js
import VueSelect from 'vue-cool-select'
Vue.use(VueSelect, {
theme: 'bootstrap' // or 'material-design'
})
```
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
```
Documentation and examples [here](https://iliyazelenko.github.io/vue-cool-select).
