Features

• Single select, multiselect, and nested tree select with cascading selection
• Same API across Vue 2.7 and Vue 3
• Native <select> wrapper and custom dropdown
• Full keyboard navigation and ARIA support
• CSS custom properties for theming
• Zero runtime dependencies

Quick start

npm install vue-pick

import "vue-pick/style.css"

<script setup>
import { ref } from "vue"
import { VPickNative } from "vue-pick"

const selected = ref(null)
const options = [
  { label: "Todo", value: "todo" },
  { label: "In Progress", value: "in-progress" },
  { label: "Done", value: "done" },
]
</script>

<template>
  <VPickNative
    v-model="selected"
    :options="options"
    placeholder="Select status"
  />
</template>

For Vue 2.7, change the import path to vue-pick/vue2.

Theming

Styling is driven entirely by CSS custom properties, so there are no size or variant props to learn. Set the variables anywhere in scope, on the component itself or on an ancestor, and every VPick below inherits them.

<VPick
  v-model="selected"
  :options="options"
  style="--vpick-height-default: 1.75rem; --vpick-width: 18rem"
/>

The most common ones:

| Variable | Default | Controls | | ---------------------------- | ------------- | ----------------------------- | | --vpick-height-default | 2rem | Control height | | --vpick-width | fit-content | Trigger width | | --vpick-border-radius | 0.625rem | Corner radius | | --vpick-listbox-max-height | 16rem | Dropdown height before scroll |

See the theming guide for the full list.

Documentation

Full docs, live examples, and API reference at vue-pick.js.org.

License

MIT