# Select
Select
component replaces default html <select>
element with more advanced feature-rich select dropdown. Select
component
supports custom data like objects
as select options, can interact with keyboard arrow up
and arrow down
keys to navigate
through selection options. You can also display arbitrary html content when displaying dropdown options and select element preview.
# Simple usage
You must provide your data to Select
component by passing an Array
to data
prop. Then your data will be passed back to Select
component inside
default
slot as each element of the provided array. Each item in default
slot is provided as item
slot prop.
default
slot is used to display the content of select dropdown . placeholder
slot is used to display the select element itself. You can also use
handle
slot to provide custom select handle icon.
Selected item:
<Select :data="selectData1" @change="selectedItem1 = $event">
<template v-slot:default="{item}">
<span v-if="item!==null">{{item}}</span>
<span v-else>Select nothing</span>
</template>
<template v-slot:placeholder="{selectedItem}">
<span v-if="selectedItem!==null">{{selectedItem}}</span>
<span v-else>Please select something</span>
</template>
</Select>
<script>
export default{
data(){
return {
selectData1:[null, 'Vue.js', 'Svelte', 'React', 'Angular', "jQuery", 'Ember.js', 'Lodash', 'Bootstrap', 'Laravel'],
selectedItem1: null,
}
}
}
</script>
# Advanced usage
You can also pass array of objects to data
prop, this way you can build more advanced select components.
Selected item:
<Select :data="selectData2" @change="selectedItem2 = $event">
<template v-slot:placeholder="{selectedItem}">
<div v-if="selectedItem !== null" class="d-flex flex-row align-items-center">
<img :src="selectedItem.img" class="img-fluid rounded-circle mr-4">
<div>{{selectedItem.name}}</div>
</div>
<span v-else>Select something</span>
</template>
<template v-slot:default="{item, isSelected}">
<div class="d-flex flex-row align-items-center text-">
<img :src="item.img" class="img-fluid rounded-circle mr-4">
<div class="w-75">{{item.name}}</div>
<div class="small">({{item.role}})</div>
<div v-if="isSelected" class="ml-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="color-gray-500" width="15" height="15" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M5 12l5 5l10 -10" />
</svg>
</div>
</div>
</template>
</Select>
<script>
export default{
data(){
return {
selectData2:[
{
test:true,
img:'https://source.unsplash.com/TAGFNCnw7f4/25x25',
name:'John',
role:'user',
},
{
test:true,
img:'https://source.unsplash.com/0jSd5XW58Ak/25x25',
name:'Nick',
role:'user',
},
{
test:true,
img:'https://source.unsplash.com/JTj_ein28zo/25x25',
name:'Tracy',
role:'admin',
},
{
test:true,
img:'https://source.unsplash.com/kKXBw9Exn30/25x25',
name:'Tasty Hotdog',
role:'food',
},
],
selectedItem2:null,
}
}
}
</script>
# Searchable select
If you provide isSearchable
prop to Select
component, when user clicks on select element, input field will appear and any input
that user fills in will be used to filter and display matching elements from data
.
WARNING
Prop isSearchable
can be used only with data
arrays which contain String
or Number
values. When using arrays of objects
it will not work correctly.
<Select :data="selectData3" is-searchable>
<template v-slot:placeholder="{selectedItem}">
<span v-if="selectedItem === null">This is searchable select</span>
<span v-else>{{selectedItem}}</span>
</template>
</Select>
<script>
export default{
data(){
return {
selectData3:['Jan', 'Feb', 'Mat', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
}
}
}
</script>
# Slots
There are 3 distinct slots for Select
component
# Default slot
default
slot is used to display items in dropdown list. Slot prop item
is provided to this slot as one item from data
array.
There is also isSelected
slot prop which is of Boolean
value and indicated whether current item is currently selected or not.
# Placeholder slot
placeholder
slot is used to display the select element itself. selectedItem
slot prop is passed to this slot which is currently
selected item from the data
array. If nothing is selected selectedItem
value will be null
# Handle slot
handle
slot is used to show the handle icon for select element. dropdownOpen
slot prop is available on this slot, it will indicate
whether currently select dropdown is open or closed.
# Events
Event change
is emitted to parent whenever user selects an item from dropdown list. $event
payload contains the data of selected item.
# Props
name | default | description | required | type |
---|---|---|---|---|
data | Array of strings/integers - selectable options for select dropdown. Should be array of Numbers | Strings | Objects | |
selected | null | Initially selected item from data array. This property is not required, but if provided - will be prioritized over internal selected item value of component | false | String|Number|Object |
isSearchable | false | If provided as true - select will be searchable on click and user will be able to filter through the data | false | Boolean |
← Radio Input Sidebar →