MultiSelect is used to select multiple items from a collection.
import MultiSelect from '@/volt/MultiSelect.vue';
import MultiSelect from '@/volt/MultiSelect.vue';
MultiSelect 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">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedCities = 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>
Selected values are displayed as a comma separated list by default, setting display as chip displays them as chips.
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedCities = 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">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
<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>
</MultiSelect>
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedCities = ref(null);
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>
MultiSelect offers multiple slots for customization through templating.
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
<template #option="slotProps">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" 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 #filtericon>
<i class="pi pi-map-marker" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer>
<div class="p-3 flex justify-between">
<SecondaryButton label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<DangerButton label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
</div>
</template>
</MultiSelect>
</div>
</template>
<script setup lang="ts">
import DangerButton from '@/volt/DangerButton.vue';
import SecondaryButton from '@/volt/SecondaryButton.vue';
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedCountries = ref(null);
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>
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property. By default, optionLabel is used when searching and filterFields can be used to customize the fields being utilized. Furthermore, filterMatchMode is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedCities = 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 showClear is enabled, a clear icon is added to reset the MultiSelect.
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" showClear :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedCities = 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 can be used loading property.
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.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 MultiSelect.
<template>
<div class="card flex justify-center">
<MultiSelect
v-model="selectedItems"
:options="items"
:maxSelectedLabels="3"
:selectAll="selectAll"
@selectall-change="onSelectAllChange($event)"
@change="onChange($event)"
optionLabel="label"
optionValue="value"
:virtualScrollerOptions="{ itemSize: 44 }"
placeholder="Select Item"
class="w-full md:w-80"
/>
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedItems = ref();
const selectAll = ref(false);
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })));
const onSelectAllChange = (event) => {
selectedItems.value = event.checked ? items.value.map((item) => item.value) : [];
selectAll.value = event.checked;
};
const onChange = (event) => {
selectAll.value = event.value.length === items.value.length;
}
</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">
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedCities = 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>
MultiSelect provides small and large sizes as alternatives to the base.
<template>
<div class="card flex flex-col items-center gap-4">
<MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
<MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
<MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.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 flex-wrap justify-center gap-4">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities?.length === 0" class="w-full md:w-80" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
import { ref } from 'vue';
const selectedCities = 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">
<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
</div>
</template>
<script setup lang="ts">
import MultiSelect from '@/volt/MultiSelect.vue';
</script>