---
url: /components/vpick-native.md
description: >-
  A styled wrapper around the native HTML select element for Vue 2.7 and Vue 3.
  Native mobile UX, zero JavaScript dropdown, and full form integration.
---

# VPickNative

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

::: tip 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](/components/vpick-native/forms)                 | Labelling, submission, validation        |
| [Accessibility](/components/vpick-native/accessibility) | Keyboard, screen readers, state          |
| [API](/components/vpick-native/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

### Custom data shape

Use `labelKey`, `valueKey`, `disabledKey`, and `groupOptionsKey` to pass data straight from your API without mapping. See the [Data Shape guide](/guide/data-shape) for the full reference.

## States

### Disabled

### Loading

### Error

## Height

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

Every other visual token is a CSS custom property too, and most are shared with
`VPick`. See [Theming](/guide/theming).

## Core props

The rest are on the [API Reference](/components/vpick-native/api).