How to add a cross icon to remove selected option

[gbast0s]

Hello, I'm using Vue Multiselect on m project and I would like to know if it's any possibility to have the cross to remove the current option if allowEmpty it's true.

When I say to have a cross, I'm talking about in a Multiselect where the user can only choose an option at once and I would like to have something as I show in the picture

Currently, the only available option to remove, it's to open and click on the current selected option

[lehoaibaokg]

You can achieve this by using the caret slot from https://vue-multiselect.js.org/v2/index.html#sub-slots, in the caret slot you can define 2 buttons:

• The first is the Remove button, it only shows up when we have selected a value
• The second is the Toggle button, it will call the toggle function from the caret slot scope

For example (Vue 2 with bootstrap icon), the caret slot will be defined like this, you can adjust it to suit your case.

<template slot="caret" slot-scope="props">
    <span
        v-if="value"
        class="multiselect__caret multiselect__caret-remove-icon"
        @click.prevent="value = null"
        role="button"
        title="Remove"
        tabindex="0">
        <i
            aria-hidden="true"
            class="bi bi-x-circle">
        </i>
    </span>
    <span
        class="multiselect__caret multiselect__caret-toggle-icon"
        @click.prevent="() => props.toggle()"
        role="button"
        title="Toggle"
        tabindex="0">
        <i
            aria-hidden="true"
            :class="isOpen ? 'bi bi-caret-up' : 'bi bi-caret-down'">
        </i>
    </span>
</template>

The CSS can be defined like this

.multiselect__caret {
    position: absolute;
    top: 0.8rem;
    height: fit-content;
    width: fit-content;
    display: block;
    cursor: pointer;
    z-index: 2;
}

.multiselect__caret-remove-icon {
    right: 25px;
}

.multiselect__caret-toggle-icon {
    right: 5px;
}