Enzyme UI

# 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.

Please select something

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.

Select something

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.

This is searchable select
<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

← Sidebar →