VPickNative

A styled wrapper around the native <select> element. Same browser behaviour, consistent design.

PreviewCode

Select statusTodoIn ProgressDone

Vue 2.7

Same code works in Vue 2.7. Just change the import to import { VPickNative } from "vue-pick/vue2".

Page	What it covers
Forms	Labelling, submission, validation
Accessibility	Keyboard, screen readers, state
API	Every prop, slot, and event in one place

Options

The options prop accepts a flat array or a nested array with groups. Groups are detected automatically when an item has an options array.

Grouped

PreviewCode

Select a roleFrontendBackendSales RepAccount Manager

Custom data shape

Use labelKey, valueKey, disabledKey, and groupOptionsKey to pass data straight from your API without mapping. See the Data Shape guide for the full reference.

PreviewCode

Select userAliceBobCharlie

States

Disabled

PreviewCode

TodoIn ProgressDone

Loading

PreviewCode

Loading...TodoIn ProgressDone

Error

PreviewCode

Select statusTodoIn ProgressDone

Height

Set --vpick-height-default to resize the control. There is no size prop.

PreviewCode

CompactTodoIn ProgressDone

DefaultTodoIn ProgressDone

Every other visual token is a CSS custom property too, and most are shared with VPick. See Theming.

Core props

The rest are on the API Reference.

modelValue

any default undefined

Selected value. Use v-model for two-way binding. In Vue 2 the prop is value.

options

OptionOrGroup[] required

Array of options or option groups.

Read more

placeholder

string default undefined

Text shown when no value is selected.

disabled

boolean default false

Disables the control.

loading

boolean default false

Shows a spinner and disables interaction.

error

string default undefined

Error message. Applies error styling and aria-invalid.

id

string default undefined

HTML id, applied to the control itself so a <label for> resolves to it.

Read more

name

string default undefined

HTML name for form submission.

Read more

required

boolean default false

HTML required attribute.

ariaLabel

string default undefined

aria-label, for when there is no visible label.

ariaDescribedby

string default undefined

aria-describedby, for wiring up hint or error text.