Skip to content
On this page

Select

The ASelect component is used to select information from a collection of options.

Import

js
import { ASelect } from 'ayovue'
import 'ayovue/themes/default/select.css'

Playground

Selected:

variant
floatingLabel
placeholder
width
groupedLabelField
groupedOptionsField
size
scrollHeight
<ASelect  :options="countries"  v-model="selectedCountry" />
Script
vue
<script setup>
// Imports
const selectedCountry = ref("");
const countries = [
  "Bangladesh", "India", "China", "USA", "Pakistan", "Srilanka"
];
<script>

Array of objects as options

Selected Country:

Select Country
View Codes
vue
<template>
  <ASelect
    v-model="selectedCountry"
    placeholder="Select Country"
    labelField="name"
    valueField="value"
    :options="countries"
  />
</template>

<script setup>
// Imports
const selectedCountry = ref('')
const countries = [
  {
    index: 1,
    name: 'Bangladesh',
    value: 'bn',
    flag: 'https://flagcdn.com/16x12/bd.png'
  },
  {
    index: 2,
    name: 'India',
    value: 'in',
    flag: 'https://flagcdn.com/16x12/in.png'
  },
  {
    index: 3,
    name: 'China',
    value: 'cn',
    flag: 'https://flagcdn.com/16x12/cn.png'
  },
  {
    index: 4,
    name: 'USA',
    value: 'us',
    flag: 'https://flagcdn.com/16x12/us.png'
  },
  {
    index: 5,
    name: 'UK',
    value: 'uk',
    flag: 'https://flagcdn.com/16x12/gb-eng.png'
  },
  {
    index: 6,
    name: 'Russia',
    value: 'ru',
    flag: 'https://flagcdn.com/16x12/ru.png'
  },
  {
    index: 7,
    name: 'Srilanka',
    value: 'sr',
    flag: 'https://flagcdn.com/16x12/sr.png'
  }
]
</script>

With slots

Selected Country:

Select Country
View Codes
vue
<template>
  <ASelect
    v-model="selectedCountry"
    placeholder="Select Country"
    :options="countries"
    labelField="name"
    valueField="value"
  >
    <template #selected="{ selectedOption }">
      <div class="d-flex ai-center" v-if="selectedOption">
        <img :src="selectedOption.flag" alt="" />
        <div class="ml-2">{{ selectedOption.name }}</div>
      </div>
    </template>

    <template #option="{ option }">
      <div class="d-flex ai-center">
        <img :src="option.flag" alt="" />
        <div class="ml-2">{{ option.name }}</div>
      </div>
    </template>
  </ASelect>
</template>

<script setup>
// Imports
const selectedCountry = ref('')
const countries = [
  {
    index: 1,
    name: 'Bangladesh',
    value: 'bn',
    flag: 'https://flagcdn.com/16x12/bd.png'
  },
  {
    index: 2,
    name: 'India',
    value: 'in',
    flag: 'https://flagcdn.com/16x12/in.png'
  },
  {
    index: 3,
    name: 'China',
    value: 'cn',
    flag: 'https://flagcdn.com/16x12/cn.png'
  },
  {
    index: 4,
    name: 'USA',
    value: 'us',
    flag: 'https://flagcdn.com/16x12/us.png'
  },
  {
    index: 5,
    name: 'UK',
    value: 'uk',
    flag: 'https://flagcdn.com/16x12/gb-eng.png'
  },
  {
    index: 6,
    name: 'Russia',
    value: 'ru',
    flag: 'https://flagcdn.com/16x12/ru.png'
  },
  {
    index: 7,
    name: 'Srilanka',
    value: 'sr',
    flag: 'https://flagcdn.com/16x12/sr.png'
  }
]
</script>

With grouped options

Selected Country:

Select Country
View Codes
vue
<template>
  <ASelect
    v-model="selectedCountry"
    :options="groupedCountries"
    placeholder="Select Country"
    labelField="name"
    valueField="value"
    grouped
    groupedLabelField="continent"
    groupedOptionsField="countries"
  />
</template>

<script setup>
// Imports
const selectedCountry = ref('')
const groupedCountries = [
  {
    continent: 'Asia',
    countries: [
      {
        name: 'Bangladesh',
        value: 'bn',
        flag: 'https://flagcdn.com/16x12/bd.png'
      },
      {
        name: 'India',
        value: 'in',
        flag: 'https://flagcdn.com/16x12/in.png'
      },
      {
        name: 'China',
        value: 'cn',
        flag: 'https://flagcdn.com/16x12/cn.png'
      },
      {
        name: 'Russia',
        value: 'ru',
        flag: 'https://flagcdn.com/16x12/ru.png'
      },
      {
        name: 'Srilanka',
        value: 'sr',
        flag: 'https://flagcdn.com/16x12/sr.png'
      }
    ]
  },
  {
    continent: 'Europe',
    countries: [
      {
        name: 'UK',
        value: 'uk',
        flag: 'https://flagcdn.com/16x12/gb-eng.png'
      },
      {
        name: 'Germany',
        value: 'de',
        flag: 'https://flagcdn.com/16x12/de.png'
      },
      {
        name: 'Portugal',
        value: 'pt',
        flag: 'https://flagcdn.com/16x12/pt.png'
      }
    ]
  },
  {
    continent: 'North America',
    countries: [
      {
        name: 'USA',
        value: 'us',
        flag: 'https://flagcdn.com/16x12/us.png'
      }
    ]
  }
]
</script>

With label, value & isDisabled as function

Selected Country:

Select Country
View Codes
vue
<template>
  <ASelect
    v-model="selectedCountry"
    :options="cointries"
    placeholder="Select Country"
    :labelField="labelFieldFunction"
    :valueField="valueFieldFunction"
    :is-disabled="isDisabledFunction"
  />
</template>

<script setup>
// Imports

const labelFieldFunction = (option: any) => option.name + '-' + option.value
const isDisabledFunction = (option: any) => {
  return option && option.name === 'India'
}
const valueFieldFunction = (option: any) => {
  if (!option) {
    return
  }
  return option.name + '(' + option.value + ')'
}

const selectedCountry = ref('')
const Countries = [
  {
    continent: 'Asia',
    countries: [
      {
        name: 'Bangladesh',
        value: 'bn',
        flag: 'https://flagcdn.com/16x12/bd.png'
      },
      {
        name: 'India',
        value: 'in',
        flag: 'https://flagcdn.com/16x12/in.png'
      },
      {
        name: 'China',
        value: 'cn',
        flag: 'https://flagcdn.com/16x12/cn.png'
      },
      {
        name: 'Russia',
        value: 'ru',
        flag: 'https://flagcdn.com/16x12/ru.png'
      },
      {
        name: 'Srilanka',
        value: 'sr',
        flag: 'https://flagcdn.com/16x12/sr.png'
      }
    ]
  },
  {
    continent: 'Europe',
    countries: [
      {
        name: 'UK',
        value: 'uk',
        flag: 'https://flagcdn.com/16x12/gb-eng.png'
      },
      {
        name: 'Germany',
        value: 'de',
        flag: 'https://flagcdn.com/16x12/de.png'
      },
      {
        name: 'Portugal',
        value: 'pt',
        flag: 'https://flagcdn.com/16x12/pt.png'
      }
    ]
  },
  {
    continent: 'North America',
    countries: [
      {
        name: 'USA',
        value: 'us',
        flag: 'https://flagcdn.com/16x12/us.png'
      }
    ]
  }
]
</script>

Props

Select component has the following props.

Prop nameTypeRequiredDefault valueDetails
modelValueAnyTrueModelValue to bind using v-model which Specifies the value of the select component
optionsArrayTrueAn array of available options
showSearchFieldBoolean, FunctionNofalseShow a search input field.
isDisabledBoolean, FunctionNofalseTo disable the select field
clearableBooleanNofalseShow a clearable icon when value is available.
autofocusBooleanNofalseTo focus the select field automatically
loadingBooleanNofalseTo show a spinner icon inside select field.
variantStringNoprimaryDefines the color variant of the select field which has the following values:
primary, secondary, success, info, warning , danger
sizeNumberNo16Defines the size of the select field.
widthStringNoautoTo set a custome width for the select field.
scrollHeightNumberNo188To set a height of options list in pixel.
placeholderStringNoTo add placeholder.
floatingLabelStringNoTo add floatingLabel.
groupedBooleanNofalseTo show a grouped select field.
groupedLabelFieldStringNoProperty name for showing group title.
groupedOptionsFieldStringNoProperty name for getting options for each group.

Slots

Select component has the following slots.

Slot nameDescriptionProps
optionCustom design for option items.N/A
selectedCustom design for selected item.N/A

Events

Select component has the following events.

Event nameDescriptionProps
aChangeEmit event when modelValue changeN/A
blurEmit event on blurN/A
focusEmit event on focusN/A

Released under the MIT License.