mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
Jeff Sagal
78 lines
3.5 KiB
Markdown
78 lines
3.5 KiB
Markdown
---
|
|
hero: true
|
|
hideToc: true
|
|
title: Vue Select
|
|
section: Introduction
|
|
description: Everything you wish the HTML select element could do, shipped as a lightweight, accessible and extendable Vue component.
|
|
---
|
|
|
|
:::lead
|
|
Vue Select is a feature rich combobox component. You might know it as a dropdown or
|
|
typeahead select. They're a staple on the web, and they're notoriously tough to get right!
|
|
:::
|
|
|
|
Vue Select provides a default template that fits most use cases. The component is designed
|
|
to be as lightweight as possible, while maintaining high standards for accessibility, developer
|
|
experience, and customization.
|
|
|
|
:::quick-links
|
|
|
|
:::quick-link{title="Installation" href="/guide/install"}
|
|
Step-by-step instructions to install Vue Select in your project. Couple lines and you're done!
|
|
|
|
#icon
|
|
<svg data-name="arrow-down-tray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
|
<path fill-rule="evenodd" d="M12 2.25a.75.75 0 01.75.75v11.69l3.22-3.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 111.06-1.06l3.22 3.22V3a.75.75 0 01.75-.75zm-9 13.5a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
|
</svg>
|
|
:::
|
|
|
|
:::quick-link{title="Options and Selections" href="/"}
|
|
You'll need to register some options so your users can select them.
|
|
|
|
#icon
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
|
|
</svg>
|
|
|
|
:::
|
|
|
|
:::quick-link{title="Customizing" href="/"}
|
|
Vue Select is plug-and-play by design, but you can always customize the look and feel.
|
|
|
|
#icon
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
|
</svg>
|
|
:::
|
|
|
|
:::quick-link{title="Premium Resources" icon="theming" href="/"}
|
|
Pre-built Vue Select instances with custom themes and features. Infinite scroll, remote option
|
|
loading and more.
|
|
|
|
#icon
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
|
|
</svg>
|
|
|
|
:::
|
|
|
|
:::
|
|
|
|
## Features
|
|
|
|
- Tagging
|
|
- Filtering / Searching
|
|
- Vuex Support
|
|
- AJAX Support
|
|
- SSR Support
|
|
- Accessible
|
|
- ~20kb Total / ~5kb CSS / ~15kb JS
|
|
- Select Single/Multiple Options
|
|
- Customizable with slots and SCSS variables
|
|
- Zero dependencies
|
|
|
|
## Resources
|
|
|
|
- **[GitHub](https://github.com/sagalbot/vue-select)**
|
|
- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
|