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.