Please note that this package is still under active development. We encourage everyone to try it and give feedback.
Searchable stylable select component for VueJS. This component is
renderless
so you can style it howyou
need to!
- Renderless
- Single and multiple mode
- Filtering
- Disabling options
- Keyboard navigation
- v-model and vuex support
- No dependencies
Read documentation with examples.
npm install ss-select
or
yarn add ss-select
Pull ss-select components in
<script>
import { SsSelect, SsSelectToggle, SsSelectOption, SsSelectSearchInput } from 'ss-select'
components: { SsSelect, SsSelectToggle, SsSelectOption, SsSelectSearchInput }
</script>
Basic usage:
<!-- ss-select is the root component. Give it your options and a unique key to track them by. -->
<ss-select v-model="model" :options="options" track-by="id" search-by="name" class="relative">
<!-- Then create a div so you can resolve data and methods you need from slot scope -->
<div slot-scope="{ selectedOption, isOpen, $get }">
<!-- toggle component opens and closes the dropdown -->
<ss-select-toggle>
{{ $get(selectedOption, 'name') || 'Select a car' }}
</ss-select-toggle>
<!-- Create a div to display options -->
<div v-show="isOpen" class="absolute min-w-full z-10">
<!-- search input component is used to filter options -->
<!-- Be sure to provide search-by prop that will be the key to filter options by -->
<ss-select-search-input placeholder="Search cars"></ss-select-search-input>
<!-- Here go options -->
<ss-select-option v-for="(option, index) in options"
:index="index"
:value="option">
{{ option.name }}
</ss-select-option>
</div>
</div>
</ss-select>