Put custom option into its own slot
Author: gtiersmaCreated Jun 20, 2026Updated Jun 20, 2026
Custom option text that appears in the dropdown while the user is typing shares the #option slot along with other options.
This is confusing because regular options get a string or object as their slot prop (depending on whether the options are objects or not), whereas the custom item gets a totally different type ({ isTag: true, label: string }) that requires working around it:
<template #option="{ option }">
<!--
vue-multiselect uses { isTag: true, label: string } for "option" when it's custom input
-->
<span v-if="option.isTag" class="item">{{ option.label }}</span>
<template v-else>
<slot name="item" :item="option">
<span class="item">{{ getLabel(option) }}</span>
</slot>
</template>
</template>It seems like this custom option should be a separate slot from #option since it's a totally different data type and part of the UI.
Source: shentao/vue-multiselect