Select
You can select options from a list of multiple formats with this component
item-1
- item-1
- item-2
- item-3
<template>
<e-select
v-model="example"
:items="['item-1','item-2','item-3']"
label="select"
color="primary"
/>
</template>
Icons
The e-select With Icon component pairs a standard text input with a functional addon element, can be positioned on either the left or right side of the input field.
<template>
<e-select
v-mdodel="model"
label="label"
:items="['item-1','item-2','item-3']"
prepend-icon="calendar"
append-icon="calendar"/>
</template>
Chips
There are different ways to use chips in component.
<e-select
v-model="chipFieldModel"
chip
label="chip"
:items="['item-1', 'item-2', 'item-3']"
/>
<e-select
v-model="chipFieldModelMultiple"
chip
label="chip multiple"
multiple
:items="['item-1', 'item-2', 'item-3']"
/>
Autocomplete
you can transform the behavior of the select using the appropriate properties and make it behave like an autocomplete.
<template>
<ESelect v-model="autocompleteModel"
v-model:search="autocompleteSearch"
clearable
autocomplete
label="Buscar"
chip
:items="filteredItems"
/>
</template>
const autocompleteSearch = ref('')
const autocompleteModel = ref('')
const stringItems = ['item-1', 'item-2', 'item-3', 'item-4', 'item-5', 'item-6']
const filteredItems = ref([...stringItems])
watch(autocompleteSearch, (value: string) => {
if (value) {
if (autocompleteTimer.value) clearTimeout(autocompleteTimer.value)
autocompleteTimer.value = window?.setTimeout(() => {
filteredItems.value = stringItems.filter(
(text) => text.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1
)
}, 100)
} else {
filteredItems.value = [...stringItems]
}
})
Slots
You can combine the different props with the component slots to display more dynamic content
<template>
<ESelect v-model="chipFieldModelMultipleWithAvatar"
label="select"
chip
multiple
:items="availableUsers"
detail="select one or more users from the list">
<template #selection="{ selection, attrs }">
<EChip v-bind="attrs"
:prepend-avatar="selection?.avatar"
:avatar-size="32"
closable>
{{ selection?.text }}
</EChip>
</template>
<template #item="{ attrs, item }">
<e-list-item v-bind="attrs"
:prepend-avatar="item.avatar">
{{ item.text }}
</e-list-item>
</template>
</ESelect>
</template>
const chipFieldModelMultipleWithAvatar = ref([1])
const availableUsers = [
{ text: 'User 1', value: 1, avatar: "/images/female-1.jpg" },
{ text: 'User 2', value: 2, avatar: "/images/male-1.jpg" },
{ text: 'User 3', value: 3, avatar: "/images/male-2.jpg" },
]
Validations
selects use a rule-based validation system that returns true or a text string.
<e-select
v-model="rulesFieldModel"
:items="['item-1','item-2','item-3']"
:rules="[required]"
label="Option"
clearable
/>
const required = (value: string) => !!value || 'Field is required'
API Reference
Props
Explore the available props for the form component
| Property | Description | Type | Default |
|---|---|---|---|
| item-text | property of the list of elements that contains the text to display | boolean | false |
| item-value | property of the list of elements which will be taken as a value | boolean | false |
| retain-color | allows the input to maintain the color regardless of the state it is in | boolean | false |
| autocomplete | enables the ability to use the component as an autocomplete | boolean | false |
| chip | encapsulates the selection within the e-chip component | boolean | false |
| chip-closable | sets the closable property of the chip within the selection to true in case the chip property is true | boolean | false |
| v-model:search | v-model of the input shown in case the component is used as autocomplete | string | number | |
| item-col | number of columns that the elements of the drop-down list will occupy | string | number | 1 |
| return-object | returns the object instead of the value specified with item-value. | boolean | false |
| loading | Show a linear progress bar at the bottom of the component and change the status to read-only | boolean | false |
| disabled | Modify the style and change the input state to disabled | boolean | false |
| readonly | change the input state to disabled | boolean | false |
| clearable | sets whether the component is cleanable or not | boolean | false |
| label-inline | set the css rule white-space: nowrap; to the label | boolean | false |
| detail | displays an informational message below the component | string | |
| outlined | applies an outlined style | boolean | false |
| label | label associated with the input field | string | number | |
| model-value | The v-model value of the component. | string number null Record<string, any> Array<itemType> | |
| placeholder | input placeholder | string | |
| suffix | Displays suffix text. | string | |
| prefix | Displays prefix text. | string | |
| input-align | apply text-align css rule to the input field | string | |
| color | Applies specified color to the component - supports only utility colors (for example primary or secondary) | string | undefined |
| detail-errors | shows an error message below the component and changes the state | Array<string> | [] |
| label-min-width | This sets a minimum width in px for the label | string | |
| cols | Sets the default number of columns the component extends. Available options are: {1...24}. | string | number | |
| sm | Changes the number of columns on small and greater breakpoints. | string | number | |
| md | Changes the number of columns on medium and greater breakpoints. | string | number | |
| lg | Changes the number of columns on large and greater breakpoints. | string | number | |
| icon-clear | icon displayed on the button to clear the input content | Array<IconPath> IconPath string | undefined |
| append-icon | icon to be displayed to the left of the component | Array<IconPath> IconPath string | undefined |
| prepend-icon | icon to be displayed to the left of the component | Array<IconPath> IconPath string | undefined |
| arrow-down | spin icon | Array<IconPath> IconPath string | undefined |
| rules | Accepts a array of types function that pass an input value as an argument and must return either true | false or a string containing an error message. This also change the input state. | Array<(param: any)=> string | true> |