npx volt-vue add Select
import Select from '@/volt/Select.vue';
Select is used with the v-model property for two-way value binding along with the options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCity = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
</script>
An alternative way to highlight the selected option is displaying a checkmark instead.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCity = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
</script>
When editable is present, the input can also be entered with typing.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCity = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
</script>
Options can be grouped when a nested data structures is provided. To define the label of a group optionGroupLabel property is needed and also optionGroupChildren is required to define the property that refers to the children of a group.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
<template #optiongroup="slotProps">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</Select>
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCity = ref();
const groupedCities = ref([
{
label: 'Germany',
code: 'DE',
items: [
{ label: 'Berlin', value: 'Berlin' },
{ label: 'Frankfurt', value: 'Frankfurt' },
{ label: 'Hamburg', value: 'Hamburg' },
{ label: 'Munich', value: 'Munich' }
]
},
{
label: 'USA',
code: 'US',
items: [
{ label: 'Chicago', value: 'Chicago' },
{ label: 'Los Angeles', value: 'Los Angeles' },
{ label: 'New York', value: 'New York' },
{ label: 'San Francisco', value: 'San Francisco' }
]
},
{
label: 'Japan',
code: 'JP',
items: [
{ label: 'Kyoto', value: 'Kyoto' },
{ label: 'Osaka', value: 'Osaka' },
{ label: 'Tokyo', value: 'Tokyo' },
{ label: 'Yokohama', value: 'Yokohama' }
]
}
]);
</script>
Select is used with the v-model property for two-way value binding along with the options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
<template #value="slotProps">
<div v-if="slotProps.value" class="flex items-center gap-2">
<img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
<div>{{ slotProps.value.name }}</div>
</div>
<span v-else>
{{ slotProps.placeholder }}
</span>
</template>
<template #option="slotProps">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium p-3">Available Countries</div>
</template>
<template #footer>
<div class="p-3">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</Select>
</div>
</template>
<script setup lang="ts">
import SecondaryButton from '@/volt/SecondaryButton.vue';
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCountry = ref();
const countries = ref([
{ name: 'Australia', code: 'AU' },
{ name: 'Brazil', code: 'BR' },
{ name: 'China', code: 'CN' },
{ name: 'Egypt', code: 'EG' },
{ name: 'France', code: 'FR' },
{ name: 'Germany', code: 'DE' },
{ name: 'India', code: 'IN' },
{ name: 'Japan', code: 'JP' },
{ name: 'Spain', code: 'ES' },
{ name: 'United States', code: 'US' }
]);
</script>
Select provides built-in filtering that is enabled by adding the filter property.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
<template #value="slotProps">
<div v-if="slotProps.value" class="flex items-center gap-2">
<img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
<div>{{ slotProps.value.name }}</div>
</div>
<span v-else>
{{ slotProps.placeholder }}
</span>
</template>
<template #option="slotProps">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>
</Select>
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCountry = ref();
const countries = ref([
{ name: 'Australia', code: 'AU' },
{ name: 'Brazil', code: 'BR' },
{ name: 'China', code: 'CN' },
{ name: 'Egypt', code: 'EG' },
{ name: 'France', code: 'FR' },
{ name: 'Germany', code: 'DE' },
{ name: 'India', code: 'IN' },
{ name: 'Japan', code: 'JP' },
{ name: 'Spain', code: 'ES' },
{ name: 'United States', code: 'US' }
]);
</script>
When showClear is enabled, a clear icon is added to reset the Select.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCity = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
</script>
Loading state is enabled with the loading property.
<template>
<div class="card flex justify-center">
<Select placeholder="Loading..." loading class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
</script>
VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with virtualScrollerOptions property, refer to the VirtualScroller for more information about the available options as it is used internally by Select.
<template>
<div class="card flex justify-center">
<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedItem = ref();
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })));
</script>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCity = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
</script>
Select provides small and large sizes as alternatives to the base.
<template>
<div class="card flex flex-col items-center gap-4">
<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
</script>
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
import { ref } from 'vue';
const selectedCity = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
</script>
When disabled is present, the element cannot be edited and focused.
<template>
<div class="card flex justify-center">
<Select disabled placeholder="Select a City" class="w-full md:w-56" />
</div>
</template>
<script setup lang="ts">
import Select from '@/volt/Select.vue';
</script>