Introduction
Vue Pick is an accessible select component library for Vue 2.7 and Vue 3. Both versions ship with the same API, slots, and props, so migrating from Vue 2 to Vue 3 is a single import path change.
Zero runtime dependencies. CSS custom properties for theming. Built for accessibility, forms, and production use.
Components
| Component | Description |
|---|---|
VPickNative | A styled wrapper around the native <select> element |
VPick | A custom dropdown with keyboard navigation and group labels |
Both components support Vue 2.7 and Vue 3.
Which one should I use?
Use VPickNative when you want native browser behaviour, better mobile UX, and simpler integration. The browser handles the dropdown, keyboard, and accessibility for you.
Use VPick when you need custom styling of the dropdown panel, group labels with separators, or control over how individual options render.
Next steps
- Installation: install the package and import the stylesheet
- Data Shape: read your existing data without transforming it
- Theming: customize with CSS variables
Then the components:
- VPickNative: a styled wrapper around the native
<select> - VPick: a custom dropdown with search, multiselect, and tree select