Forms
VeeAutocomplete
An autocomplete component that uses the composition API provided by Vee-Validate to perform validation.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
UiVeeAutocomplete wraps UiAutocomplete with a label, hint and animated error message, and registers the value with the surrounding Vee-Validate form. The value is the text in the input, so it is always a string and any text is accepted unless your schema says otherwise. Any other attribute (open-on-focus, open-on-click, ignore-filter, ...) is forwarded to UiAutocomplete.
Basic example
options takes an array of strings. Picking a suggestion fills the input; anything else the user types is also a valid value. The required prop only adds the asterisk and aria-required, so enforce it in your schema.
Default value
Use v-model or initialValues to set an initial value. Add clearable for a clear button and open-on-focus to show the suggestions as soon as the input is focused.
Groups
Options can be objects. Options sharing the same group are rendered together under a label, and disabled options cannot be picked.
Custom items
The default slot replaces the generated suggestions, so you can render any UiAutocomplete* parts you like. Use empty-text (or the empty slot) to show a message when nothing matches.
Icons and trigger
Use icon (or the icon slot) for a leading icon, clearable for a clear button and show-trigger for a chevron that toggles the suggestions.
Async suggestions
Load suggestions from your API as the user types. Pass ignore-filter so the results are not filtered a second time on the client.
Disabled
Contact support to change your plan.
Form
Autocompletes work like any other Vee field. This example derives email suggestions from the typed text and validates the country against a list, since the field itself accepts any text.
Props
| Prop | Type | Description |
|---|---|---|
name | string | Field name registered with Vee-Validate. Falls back to a generated id. |
label | string | Label shown above the input. |
label-hint | string | Extra hint shown next to the label. |
hint | string | Helper text. Hidden while there is an error. |
placeholder | string | Placeholder of the input. |
icon | string | Icon shown at the start of the input. |
options | (string | { value: string; disabled?: boolean; group?: string })[] | Suggestions to render. value is the text that fills the input. |
empty-text | string | Message shown when nothing matches. While empty (and no empty slot is used) the popup stays hidden when there is no match. |
clearable | boolean | Shows a button that clears the input. |
show-trigger | boolean | Shows a chevron button that toggles the suggestions. |
rules | any | Vee-Validate rules (or use a schema on useForm). |
v-model | string | Current value. |
required | boolean | Shows the required asterisk and sets aria-required. |
disabled | boolean | Prevents interaction. |
validate-on-mount | boolean | Validates as soon as the field mounts. |
class | HTMLAttributes["class"] | Classes for the wrapper element. |
Slots
| Slot | Description |
|---|---|
default | Replaces the generated suggestions inside the popup. |
label | Custom label. Receives error-message and value. |
icon | Custom leading icon. |
empty | Custom empty state. |
hint | Custom hint. Receives error-message and value. |
errorMessage | Custom error message. Receives error-message and value. |
Accessibility
The input keeps the combobox semantics of UiAutocomplete, including keyboard navigation. The label is linked to the input, the hint and error message are linked with aria-describedby, and the input is marked aria-invalid (and the wrapper styled) when validation fails. The field is marked as touched when the input loses focus, and like the other Vee components, errors are shown after a value change or on submit.