Forms

VPickNative renders a real <select>, so form behaviour on this page is the browser's rather than the component's.

Labelling

Pair a label with for and id rather than wrapping the component in it:

<label for="status">Status</label>
<VPickNative id="status" v-model="selected" :options="options" />

id is applied to the <select> itself, so for resolves to it and clicking the label focuses the control.

ariaLabel is the alternative when there is no visible label.

Submitting

Give it a name and it submits like any other field:

<form method="post">
  <VPickNative name="status" v-model="selected" :options="options" />
  <button type="submit">Save</button>
</form>

name and required are passed straight to the <select>, so required participates in native validation and the browser's own "please select an item" message appears with no work from you.

This is where the two components differ most. VPick has to keep a visually hidden <select> in sync to achieve the same thing. Here there is nothing to keep in sync, because the select is the control.

Roles, keyboard support and screen reader behaviour are on Accessibility.

Props

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.