---
title: "Vue 3 Select Component"
description: "Build accessible, type-safe select inputs in Vue 3. Use the batteries-included Select component or compose headless primitives for full UI control."
canonical_url: "https://vue3-select-component.vercel.app"
---
# Vue 3 Select Component

> Build accessible, type-safe select inputs in Vue 3. Use the batteries-included Select component or compose headless primitives for full UI control.

<u-page-hero :ui="{"container":"max-w-7xl mx-auto"}" orientation="vertical">
<template v-slot:headline="">
<u-button size="md" to="https://vue3-select-component.vercel.app/guide/migration" icon="i-lucide-sparkles" variant="soft">

v1: introducing Primitives

</u-button>
</template>

<template v-slot:title="">

Vue 3 Select Component

</template>

<template v-slot:description="">

Ship accessible selects in minutes. Use the assembled component or compose headless primitives.

</template>

<template v-slot:links="">
<u-button size="xl" to="https://vue3-select-component.vercel.app/getting-started/introduction" color="neutral" trailing-icon="i-lucide-arrow-right">

Get Started

</u-button>

<u-button size="xl" to="https://github.com/TotomInc/vue3-select-component" color="neutral" icon="i-simple-icons-github" variant="outline" target="_blank">

GitHub

</u-button>
</template>
</u-page-hero>

<u-page-section :ui="{"container":"max-w-7xl mx-auto"}" description="Type-safe and accessible. Pick the assembled component or compose primitives." headline="Core features" title="Everything you need in a select">
<template v-slot:features="">
<u-page-feature icon="i-lucide-layers" to="https://vue3-select-component.vercel.app/getting-started/usage">
<template v-slot:title="">

Batteries-included Select

</template>

<template v-slot:description="">

Drop-in component with v-model, options, search, clear, and multi-select.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-blocks" to="https://vue3-select-component.vercel.app/guide/primitives">
<template v-slot:title="">

Headless primitives

</template>

<template v-slot:description="">

Compose SelectRoot, SelectTrigger, SelectPopover, and more for custom UX.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-braces" to="https://vue3-select-component.vercel.app/guide/typescript">
<template v-slot:title="">

End-to-end types

</template>

<template v-slot:description="">

Generics tie option values to v-model. Extend options with custom fields safely.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-shield-check" to="https://vue3-select-component.vercel.app/guide/accessibility">
<template v-slot:title="">

Accessible by default

</template>

<template v-slot:description="">

WAI-ARIA combobox pattern, keyboard navigation, focus management, and screen readers.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-palette" to="https://vue3-select-component.vercel.app/guide/styling">
<template v-slot:title="">

Your design system

</template>

<template v-slot:description="">

Unstyled primitives with stable data-attribute hooks. Bring your own CSS.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-arrow-right-left" to="https://vue3-select-component.vercel.app/guide/migration">
<template v-slot:title="">

v0 migration guide

</template>

<template v-slot:description="">

Step-by-step upgrade path from v0 to v1. Rename props, restyle, and adopt primitives.

</template>
</u-page-feature>
</template>
</u-page-section>

<u-page-section :ui="{"container":"max-w-7xl mx-auto"}" description="Configuration, customization, and every primitive component." headline="Documentation" title="Explore the API">
<u-page-grid>
<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1" icon="i-lucide-settings-2" to="https://vue3-select-component.vercel.app/api/props">
<template v-slot:title="">

Props

</template>

<template v-slot:description="">

v-model, options, flags, mappers, teleport, and filterBy for Select and SelectRoot.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1" icon="i-lucide-zap" to="https://vue3-select-component.vercel.app/api/events">
<template v-slot:title="">

Events

</template>

<template v-slot:description="">

optionSelected, optionDeselected, search, menuOpened, and menuClosed with typed payloads.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1" icon="i-lucide-layout-template" to="https://vue3-select-component.vercel.app/api/slots">
<template v-slot:title="">

Slots

</template>

<template v-slot:description="">

Customize values, options, tags, icons, and empty states on primitives.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1" icon="i-lucide-box" to="https://vue3-select-component.vercel.app/api/components">
<template v-slot:title="">

Components

</template>

<template v-slot:description="">

Reference for SelectRoot, SelectTrigger, SelectListbox, SelectOption, and more.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1" icon="i-lucide-check-square" to="https://vue3-select-component.vercel.app/guide/multiselect">
<template v-slot:title="">

Multi-select

</template>

<template v-slot:description="">

Pick multiple values, show tags, remove with keyboard, and clear all at once.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1" icon="i-lucide-palette" to="https://vue3-select-component.vercel.app/guide/styling">
<template v-slot:title="">

Styling

</template>

<template v-slot:description="">

Style every part with stable data-attribute hooks and your own CSS.

</template>
</u-page-card>
</u-page-grid>
</u-page-section>

## Resources for Agents

- [API catalog: every service document this site publishes](https://vue3-select-component.vercel.app/.well-known/api-catalog)
- [Sitemap (XML)](https://vue3-select-component.vercel.app/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://vue3-select-component.vercel.app/sitemap.md)
- [MCP server card: MCP endpoint at https://vue3-select-component.vercel.app/mcp](https://vue3-select-component.vercel.app/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://vue3-select-component.vercel.app/mcp)
- [llms.txt: index of the documentation for LLMs](https://vue3-select-component.vercel.app/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://vue3-select-component.vercel.app/llms-full.txt)
- [OpenAPI document: every route this site serves to agents](https://vue3-select-component.vercel.app/openapi.json)


## Sitemap

See the full [sitemap](https://vue3-select-component.vercel.app/sitemap.md) for all pages.