VPickNative API

Every prop, slot and event in one place.

Props

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.

labelKey

string | string[] default "label"

Key to read each option's visible label from. An array acts as a fallback chain: the first key with a non-empty value wins.

Read more

valueKey

string default "value"

Key to read each option's value from.

Read more

disabledKey

string default "disabled"

Key to read each option's disabled flag from.

Read more

groupOptionsKey

string default "options"

Key for the options array inside a group.

Read more

Slots

Slot	Description
icon	Custom chevron icon. Shown when not loading.
loading	Custom loading indicator. Shown when loading is true.

<VPickNative :options="options">
  <template #icon>
    <MyCustomChevron />
  </template>
  <template #loading>
    <MySpinner />
  </template>
</VPickNative>

The two are mutually exclusive: whichever suits the current state is the one rendered.

Events

Event	Payload	Description
update:modelValue	any	Emitted when the selection changes. Vue 2 emits input instead, which is what v-model listens for there.

One event, because the browser owns the interaction. VPick additionally emits search, select and deselect, none of which have a meaning here.

CSS custom properties

Theming is documented separately, since most variables are shared with VPick. See Theming.

Types

interface OptionItem {
  label: string
  value: any
  disabled?: boolean
  // Set by Vue Pick, not by you: the original object you passed in.
  raw?: unknown
}

interface OptionGroup {
  label: string
  disabled?: boolean
  options: OptionItem[]
}

type OptionOrGroup = OptionItem | OptionGroup

children is absent here on purpose: a native <select> cannot nest beyond one level of <optgroup>, so tree data is VPick's.

See the Data Shape guide for reading your own shapes without transforming them.