VueEasySelect (multiple)

Pass is-multiple and an array modelValue to switch to multi-select. Selected options render as removable chips in the control.

Basic multiple

Tap the cross on a chip to remove a selection. Nothing special on the consumer side — just set is-multiple.

Pick some names

name_0name_1name_2name_3name_4name_5name_6name_7name_8name_9name_10name_11name_12name_13name_14name_15name_16name_17name_18name_19

<script setup>
import { ref } from 'vue';
import { VueEasySelect } from 'vue-easy-select';

const value = ref([]);
const options = Array(20).fill(null).map((_, id) => ({ id, name: `name_${id}` }));
</script>

<template>
    <VueEasySelect
        v-model="value"
        name="select"
        :options="options"
        :is-multiple="true"
        placeholder="Pick some names"
    />
</template>

Multiple + searchable

Combine is-multiple with is-searchable for typical tag-picker UX.

Pick some names

name_0name_1name_2name_3name_4name_5name_6name_7name_8name_9name_10name_11name_12name_13name_14name_15name_16name_17name_18name_19

<VueEasySelect
    v-model="value"
    name="select"
    :options="options"
    :is-multiple="true"
    :is-searchable="true"
    search-placeholder="Type to filter"
    placeholder="Pick some names"
/>

Multiple + search inside dropdown

In multi mode, search-position='options' is usually the better UX — the chips stay visible in the control while you filter the dropdown.

name_0

name_1

name_0name_1name_2name_3name_4name_5name_6name_7name_8name_9name_10name_11name_12name_13name_14name_15name_16name_17name_18name_19

<VueEasySelect
    v-model="value"
    name="select"
    :options="options"
    :is-multiple="true"
    :is-searchable="true"
    search-position="options"
    search-placeholder="Type to filter"
    placeholder="Pick some names"
/>

Clearable multiple

is-clearable works the same in multi mode — the × button wipes all selected chips in one click. Only renders when there's at least one selection.

name_0

name_1

name_2

name_0name_1name_2name_3name_4name_5name_6name_7name_8name_9name_10name_11name_12name_13name_14name_15name_16name_17name_18name_19

<script setup>
import { ref } from 'vue';
import { VueEasySelect } from 'vue-easy-select';

const value = ref(['0', '1', '2']); // pre-selected, shows the clear button right away
const options = Array(20).fill(null).map((_, id) => ({ id, name: `name_${id}` }));
</script>

<template>
    <VueEasySelect
        v-model="value"
        name="select"
        :options="options"
        :is-multiple="true"
        :is-clearable="true"
        placeholder="Pick some names"
    />
</template>