Accessibility

VPick draws its own dropdown, so everything the browser gives a native <select> for free has to be implemented here. This page is what that implementation covers.

If you would rather not take on any of it, VPickNative hands the whole problem back to the browser.

Keyboard navigation

Key	Action
Enter / Space	Open dropdown / select focused option. In searchable mode, Space types normally.
Escape	Close dropdown. In searchable mode, when already closed and clearable, clears the selection.
Arrow Up / Arrow Down	Move focus between options
Home	Focus first option
End	Focus last option
Arrow Right	In tree mode, expand a collapsed branch and move to its first child.
Arrow Left	In tree mode, collapse an expanded branch; on a leaf or collapsed branch, jump to its parent.
Backspace	In multiple mode, removes the last selected chip when the search input is empty. Disable with backspaceRemoves: false.
Delete	Same as Backspace. Disable with deleteRemoves: false.
Tab	Close dropdown and move focus

Focus stays on the trigger throughout. Option rows are never focusable, so Tab always leaves the control rather than walking through the list.

Roles and state

• WAI-ARIA listbox pattern (role="combobox", role="listbox", role="option").
• aria-expanded reflects open state on the trigger.
• aria-activedescendant tracks the focused option, which is how the highlight moves without focus leaving the trigger.
• aria-multiselectable is set on the listbox in multiple mode, with aria-selected reflected per option.
• aria-invalid is set when the error prop is present.
• aria-disabled on individual disabled options, and on branch rows made unselectable by disableBranchNodes.
• The placeholder row under an empty branch is inert: no option role, and arrow keys skip it.

Labelling

id lands on the control itself, so a <label for> resolves to it. Wrapping the component in a label instead binds it to the wrong element. See Forms.

Assistive technology

Beyond the ARIA above, the hidden <select> gives assistive technology and Safari autofill a real form control to find.

Motion

Transitions respect prefers-reduced-motion. See Theming.

Props

errorstring default undefined

Error message. Applies error styling and aria-invalid.

ariaLabelstring default undefined

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

ariaDescribedbystring default undefined

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