@vue-select-plus/vue
v0.1.6
Published
Accessible, headless Vue 3 select component (combobox, multi-select, tree, async).
Maintainers
l.mathey.serverReadme
@vue-select-plus/vue
An accessible, headless select component for Vue 3.
Docs: https://vue-select-plus.github.io/vue-select-plus/
Features
- WAI-ARIA 1.2 combobox pattern with full keyboard support.
- Single, multi, and tree selection.
- Client filtering, or server-side via
@search+:filterable="false". - Floating UI positioning with teleport to
<body>. - Native form integration via hidden
<input>s andFormData. - CSS-variable theming, dark mode,
forced-colors,prefers-reduced-motion. - Virtualised list for large option sets.
- TypeScript types and SSR-safe IDs (Vue 3.5
useId()).
Install
npm install @vue-select-plus/vueRequires Vue 3.5 or newer. The default stylesheet is bundled inside the
package; @vue-select-plus/styles still publishes the same file separately
if you prefer to install it explicitly.
Quickstart
<script setup lang="ts">
import { ref } from 'vue';
import { VSelect, type SelectOption } from '@vue-select-plus/vue';
import '@vue-select-plus/vue/styles.css';
const fruit = ref<string | null>(null);
const options: SelectOption[] = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'cherry', label: 'Cherry' }
];
</script>
<template>
<VSelect
v-model="fruit"
:options="options"
label="Choose a fruit"
placeholder="Pick one…"
searchable
clearable
/>
</template>Sibling packages
| Package | What |
| :--- | :--- |
| @vue-select-plus/vue (you are here) | The Vue 3 component. |
| @vue-select-plus/core | Headless composables — bring your own UI. |
| @vue-select-plus/styles | Default theme. Override the CSS variables to skin it. |
Docs
- Getting Started
- Examples — async search, native forms, creator mode, trees
- API Reference
- Accessibility — WCAG 2.1 compliance map
- SSR / Nuxt
- Recipes — TanStack Query, VeeValidate, FormKit, Modal, Mobile
- Troubleshooting
License
MIT © Leon Mathey