VueEasySelect

The opinionated, batteries-included select. Renders its own dropdown via <Teleport> with auto-flip positioning, outside-click dismiss, and reposition on scroll/resize.

Basic

Drop it in, pass options, done.

Pick a number

001002003004005006

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

const value = ref('');
const options = [
    { id: '1', name: '001' },
    { id: '2', name: '002' },
    { id: '3', name: '003', disabled: true },
    { id: '4', name: '004' },
    { id: '5', name: '005' },
    { id: '6', name: '006' }
];
</script>

<template>
    <VueEasySelect
        v-model="value"
        name="select"
        :options="options"
        placeholder="Pick a number"
    />
</template>

Custom arrow and item slots

Use the #arrow and #item slots to fully restyle the trigger and each option. The #item slot receives { item, isActive } — no library styling is applied to your markup, so you decide how to render checked / active / disabled state.

002

⬇️

001002003004005006

<VueEasySelect v-model="value" name="select" :options="options">
    <template #arrow="{ isOpen }">
        {{ isOpen ? "⬆️" : "⬇️" }}
    </template>
    <template #item="{ item, isActive }">
        <span :style="{ background: isActive ? '#fef3c7' : 'transparent', padding: '6px 10px', display: 'block' }">
            {{ item.disabled ? '⚪️' : !item.isChecked ? "⚫️" : "🔘️" }}
            {{ item.name }}
        </span>
    </template>
</VueEasySelect>

The scoped slot gives you:

• item — the option object (plus isChecked flag)
• isActive — whether keyboard / mouse cursor is currently on this row

No classes from the library are applied to your slot content — isActive is just data, render it however fits your design.

Searchable

Set is-searchable to render an input inside the control when open. Filtering is client-side by default.

Pick a number

001002003004005006

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

Clearable

Opt in with is-clearable to render a minimal × button in the control when a value is selected. The button wipes the whole modelValue (empty string for single, empty array for multi).

002

001002003004005006

<VueEasySelect
    v-model="value"
    name="select"
    :options="options"
    :is-clearable="true"
    placeholder="Pick a number"
/>

Custom clear icon

Replace the default CSS × with any icon, component, or character via the #clear-icon slot. The surrounding button (with aria-label, @click.stop, focus logic) stays the same.

002

001002003004005006

<VueEasySelect
    v-model="value"
    name="select"
    :options="options"
    :is-clearable="true"
>
    <template #clear-icon>
        🗑️
    </template>
</VueEasySelect>

Search inside the dropdown

By default the search input replaces the control's content when is-searchable is on. Set search-position='options' to render it as a sticky header inside the dropdown instead — the control shows the current selection while you filter.

002

001002003004005006

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

Custom search icon

Override the default CSS magnifier with your own icon via the #search-icon slot.

Pick a number

001002003004005006

<VueEasySelect
    v-model="value"
    name="select"
    :options="options"
    :is-searchable="true"
    search-placeholder="Type to filter"
>
    <template #search-icon>
        🔎
    </template>
</VueEasySelect>

Remote search

Set is-remote-search='true' to disable the built-in client-side filter. The component then just forwards the search text via v-model:search-value — you fetch the matching options yourself and assign them to :options.

Pick a fruit

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

const value = ref('');
const query = ref('');
const options = ref([]);

watch(query, async (q) => {
    if (!q) { options.value = []; return; }
    const res = await fetch(`/api/fruits?q=${encodeURIComponent(q)}`);
    options.value = await res.json();
});
</script>

<template>
    <VueEasySelect
        v-model="value"
        v-model:search-value="query"
        name="select"
        :options="options"
        :is-searchable="true"
        :is-remote-search="true"
        search-placeholder="Type to search fruits"
    />
</template>

Keyboard

The control is focusable (tabindex="0", role="combobox").

Key	Action
ArrowDown / ArrowUp	Open dropdown / move active option
Enter	Open, or select active option (closes in single mode)
Space	Toggle open
Escape	Close dropdown