Select

Select is an advanced component for selecting items from a list with theming and customization options.

Basic

The Select component is used for selecting items from a list. It supports various customization options and advanced features.

<Select v-model="selectedItem"></Select>

Data Items

The dataSelect prop accepts an array of items available for selection.

Fruits

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    v-model="selectedItem">
</Select>

Key Select

The keySelect prop specifies the key used to uniquely identify each item in the data set.

<Select 
    :dataSelect="[
        { id: 1, name: 'Apple' }, 
        { id: 2, name: 'Banana' }, 
        { id: 3, name: 'Cherry' }]" 
    keySelect="id" 
    v-model="selectedItem">
</Select>

Value Select

The valueSelect prop specifies the key used to retrieve the display value of each item.

<Select 
    :dataSelect="[
        { id: 1, name: 'Apple' }, 
        { id: 2, name: 'Banana' }, 
        { id: 3, name: 'Cherry' }]" 
    keySelect="id" 
    valueSelect="name" 
    v-model="selectedItem">
</Select>

Multiple Selection

The multiple prop enables multiple item selection.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    multiple 
    v-model="selectedItems">
</Select>

Max Visible Items

The maxVisible prop sets the maximum number of items visible in the dropdown list.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']" 
    :maxVisible="3" 
    v-model="selectedItem">
</Select>

Close Button Badge

The closeButtonBadge prop enables a close button for badges in multiple selection mode.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    multiple 
    closeButtonBadge 
    v-model="selectedItems">
</Select>

No Data Text

The noData prop sets the text displayed when there are no items in the list.

<Select 
    :dataSelect="[]" 
    noData="No fruits available" 
    v-model="selectedItem">
</Select>

Disable Query

The noQuery prop disables the query-based filtering of items.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    noQuery 
    v-model="selectedItem">
</Select>

AutoFocus

The autoFocus prop automatically focuses the select input when the component is mounted.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    autoFocus 
    v-model="selectedItem">
</Select>

The paramsFixWindow prop allows you to configure the dropdown's positioning behavior.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    :paramsFixWindow="{ position: 'right', eventOpen: 'hover', eventClose: 'hover' }" 
    v-model="selectedItem">
</Select>

Custom CSS

Class for Query Text Mask

The classMaskQuery prop allows you to apply custom CSS classes to the query text mask.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    classMaskQuery="custom-mask-query-class" 
    v-model="selectedItem">
</Select>

Class for Select Base Container

The classSelect prop allows you to apply custom CSS classes to the select base container.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    classSelect="custom-select-class" 
    v-model="selectedItem">
</Select>

The classSelectList prop allows you to apply custom CSS classes to the dropdown list container.

<Select 
    :dataSelect="['Apple', 'Banana', 'Cherry']" 
    classSelectList="custom-select-list-class" 
    v-model="selectedItem">
</Select>