website·Indexed 29 days ago
https://vue3-select-component.vercel.appAn accessible select component for Vue 3 (3.5+) focusing on developer experience, type safety, and ease of use. It provides both an assembled Select for quick implementation and headless primitives for custom composition. Features include single and multi-select modes, WAI-ARIA Combobox Pattern compliance, TypeScript support, and compatibility with Nuxt 3 and 4.
Primitives are headless building blocks that share state via SelectRoot using provide/inject. All primitives must be nested inside a SelectRoot to function. The hierarchy is as follows:
Select is a fixed composition of primitives. It uses SelectRoot as the state owner, which provides a SelectContext injected into child primitives. The component tree consists of SelectRoot containing a SelectTrigger (with optional SelectIcon, SelectValue, SelectInput, SelectTrailingIcon, and SelectClear) and a SelectPopover containing a SelectListbox (with SelectNoOptions, SelectOption entries, and an optional SelectCreateItem).Select component for common use cases and a set of headless primitives for full customization. v0 prop aliases are not supported in v1; all props must be renamed to their v1 equivalents.combobox, listbox, option), full keyboard navigation, focus management using aria-activedescendant for searchable inputs, and screen reader support via descriptive labels and state attributes.Select component.// v1 Assembled Component
import Select from "vue3-select-component"
import "vue3-select-component/styles"
// v1 Primitives (New)
import { SelectRoot, SelectTrigger } from "vue3-select-component/primitives"searchable is enabled, typing filters options in real time and the active option syncs to the first matching result. Focus remains on the input while aria-activedescendant tracks the highlighted option. Disabled options are automatically skipped during keyboard navigation.<script setup lang="ts">
import { ref } from "vue"
import Select from "vue3-select-component"
import "vue3-select-component/styles"
const selected = ref<string | null>(null)
</script>
<template>
<Select
v-model="selected"
:options="[
{ label: 'Available', value: '1' },
{ label: 'Unavailable', value: '2', disabled: true },
]"
placeholder="Pick an option"
/>
</template>label and value. These properties can be accessed when using the primitive components (like SelectOption inside SelectRoot) to create custom-rendered dropdown items.<script setup lang="ts">
import { SelectRoot, SelectOption, ... } from "vue3-select-component/primitives"
const options = [
{ label: "JavaScript", value: "js", version: "ES2022", creator: "Brendan Eich" },
]
</script>
<template>
<SelectRoot v-model="selected" :options="options">
<!-- ... other primitives ... -->
<SelectListbox>
<SelectOption
v-for="option in options"
:key="option.value"
:value="option.value"
:label="option.label"
>
<span>{{ option.label }} ({{ option.version }})</span>
<span>{{ option.creator }}</span>
</SelectOption>
</SelectListbox>
</SelectRoot>
</template>Infinite scrolling allows loading options in pages as the user scrolls the menu. This is achieved by combining SelectRoot with a custom list component that utilizes @vueuse/core's useInfiniteScroll.
Implementation strategy:
options array, isLoading state, and the totalCount of available remote items.@menu-opened event on SelectRoot to trigger the first page fetch if the options list is empty.:options array passed to SelectRoot.:loading prop on SelectRoot to show a loading indicator during the initial fetch.pnpm add vue3-select-component @vueuse/core<!-- InfiniteScrollSelect.vue -->
<template>
<SelectRoot
v-model="selected"
:options="options"
:loading="isLoading"
@menu-opened="onMenuOpened"
>
<SelectTrigger>
<SelectValue placeholder="Pick a post" />
<SelectTrailingIcon />
</SelectTrigger>
<SelectPopover>
<SelectListbox class="infinite-scroll-listbox">
<InfiniteScrollOptionList
:loaded-count="options.length"
:total-count="totalCount"
:is-loading-more="isLoadingMore"
:has-more="hasMore"
@load-more="loadPosts(true)"
/>
</SelectListbox>
</SelectPopover>
</SelectRoot>
</template>
<style scoped>
:deep([data-select-listbox].infinite-scroll-listbox) {
overflow: hidden;
}
</style>create-item prop is enabled, the @create event is emitted when a user chooses to create a new item from the search query. The payload is the trimmed search query as a string. The component does not automatically update options or v-model; the developer must handle the event to update the data source.<script setup lang="ts">
import { ref } from "vue"
import Select from "vue3-select-component"
import "vue3-select-component/styles"
const items = ref(["Backlog", "Todo", "Done"])
const value = ref("Backlog")
function onCreate(item: string) {
items.value.push(item)
value.value = item
}
</script>
<template>
<Select
v-model="value"
create-item
:options="items"
:get-option-label="(item) => item"
:get-option-value="(item) => item"
placeholder="Pick or create a status"
@create="onCreate"
/>
</template>filter-by prop of SelectRoot. This function receives the current option and the search string, returning a boolean to determine if the option should be visible. This is useful for searching across metadata (e.g., searching by both country name and region).<script setup lang="ts">
import { ref } from "vue"
import { SelectRoot, SelectTrigger, SelectValue, SelectInput, SelectTrailingIcon, SelectPopover, SelectListbox, SelectNoOptions, SelectOption } from "vue3-select-component/primitives"
import "vue3-select-component/styles"
type CountryRecord = { name: string; code: string; region: string }
const selected = ref<string | null>(null)
const countries: CountryRecord[] = [
{ name: "France", code: "FR", region: "Europe" },
{ name: "Japan", code: "JP", region: "Asia" },
{ name: "Brazil", code: "BR", region: "South America" },
{ name: "Canada", code: "CA", region: "North America" },
]
function filterByRegion(option: { label: string; value: string }, search: string) {
const query = search.trim().toLowerCase()
if (!query) return true
const record = countries.find((entry) => entry.code === option.value)
return option.label.toLowerCase().includes(query) || record?.region.toLowerCase().includes(query) === true
}
</script>
<template>
<SelectRoot v-model="selected" searchable :filter-by="filterByRegion">
<SelectTrigger>
<SelectValue placeholder="Search by country or region" />
<SelectInput />
<SelectTrailingIcon />
</SelectTrigger>
<SelectPopover>
<SelectListbox>
<SelectNoOptions />
<SelectOption v-for="country in countries" :key="country.code" :value="country.code" :label="country.name">
<span>{{ country.name }}</span>
<span>{{ country.region }}</span>
</SelectOption>
</SelectListbox>
</SelectPopover>
</SelectRoot>
</template>Select component and the low-level Primitives based on your requirements:Use assembled Select | Use primitives |
|---|---|
| Standard dropdown UX | Custom layouts or infinite scroll |
| Quick integration | Non-standard trigger or popover behavior |
| Migrating from v0 | Full control over every DOM node |