VPickNative API

Every prop, slot and event in one place.

Props

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.

labelKeystring | 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

valueKeystring default "value"

Key to read each option's value from.

Read more

disabledKeystring default "disabled"

Key to read each option's disabled flag from.

Read more

groupOptionsKeystring 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.