Searchable stylable select component for VueJS. This component is
renderlessso you can style it howyouneed 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-selector
yarn add ss-selectPull 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>