Select

ESelect is a common UI element used in web forms to allow users to select one or multiple options from a set. Demo Here

Usage

<template>
  <ESelect v-model="value" label="Choose" :options="options"/>
</template>

<script setup>
  const options = ref([
    "Option 1",
    "Option 2",
    "Option 3",
  ]);
  const value = ref("");
</script>

Custom Select

We offer an additional layer of control and personalization. By using selection slot, users can tailor their selections to better meet their specific design preferences.

<template>
  <ESelect
      v-model="selectedCrypto"
      label="Currency"
      :options="options"
      itemValue="title"
      inputClasses="!ps-2">
    <template v-slot:selection="{ selected }">
      <div class="flex items-center" v-if="selected.title">
        <EIcon
            :name="selected.icon.name"
            :options="{
              color: selected.icon.color,
              size: 26,
              type: selected.icon.type
            }"/>
        <h2>
          {{ selected.title }}
        </h2>
      </div>
    </template>
    <template v-slot:options="{ option, selectedOption }">
      <div class="flex items-center">
        <EIcon
            :name="option.icon.name"
            :options="{
              color: option.icon.color,
              type: option.icon.type
            }"/>
        <h2>
          {{ option.title }}
        </h2>
      </div>
    </template>
  </ESelect>
</template>

<script setup>
  const options = ref([
    {
      icon: {name: "Bitcoin", color: "#E3B510"},
      title: "Bitcoin",
    },
    {
      icon: {
        name: "Ethereum",
        color: "#5584FF"
      },
      title: "Ethereum",
    },

  ])
  const selectedCrypto = ref([options.value[0]])
</script>

Props

a For ESelect component, the following props are available:

Prop	Type	Default	Note
modelValue	[Array, String, Object]	-	Value of the selected item.
label	String	-	Component's label
clearable	Boolean	false	Adds clear option.
disabled	Boolean	false	Disables the select.
optionClasses	String	-	Classes for each option
options	Array	-	Displays list of options.
itemValue	String	-	If the type of options props is an object, the itemValue prop specifies which property of the select options should be used as a key to return as a selected value.
itemTitle	String	-	If the type of options props is an object, the itemTitle prop specifies which property of the select options should be used as a key to be represented visually in ESelect as a selected value.
variant	String	"fill"	The ESelect element can be represented in four ways: fill and border.
message	String	-	Adds a message below the select.
maxHeight	String	-	Sets the component's max height.
name	String	-	HTML name attribute.
validateOn	String	"input"	Triggers validation on @values: submit, input, blur.
rules	Array	-	Validation rules. For more info refer to Form Validation.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
size	String	"md"	The ESelect element has three predefined sizes: sm, md, lg.
multiple	Boolean	false	The multiple property allows more than one item to be selected at the same time.
placeholder	String	-	Defines a placeholder displayed in a form control when the control has no value.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
square	Boolean	false	Removes rounded corners of the element.

Emits

The ESelect component contains following emits.

Emit	Description
update:modelValue	Controls the select.