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.

modelValueany default undefined

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

optionsOptionOrGroup[] required

Array of options or option groups.

Read more

placeholderstring default undefined

Text shown when no value is selected.

disabledboolean default false

Disables the control.

loadingboolean default false

Shows a spinner and disables interaction.

errorstring default undefined

Error message. Applies error styling and aria-invalid.

idstring default undefined

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

Read more

namestring default undefined

HTML name for form submission.

Read more

requiredboolean default false

HTML required attribute.

ariaLabelstring default undefined

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

ariaDescribedbystring default undefined

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