Forms

VeeCombobox

A combobox 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.

UiVeeCombobox wraps UiCombobox with a label, hint and animated error message, and registers the value with the surrounding Vee-Validate form. The form stores the value of the selected option (an array of values when multiple), while the input and the tags show its label. Any other attribute (open-on-focus, ignore-filter, ...) is forwarded to UiCombobox.

Basic example

options takes an array of strings, numbers or { value, label, disabled, group } objects. The form stores the value, the input shows the label. The required prop only adds the asterisk and aria-required, so enforce it in your schema.

Default value

Bind a value with v-model (or initialValues on useForm). Add clearable to show a button that clears the selection.

Groups

Give options a group to render them under a label. Ungrouped options are rendered first.

Multiple

Set multiple to select more than one option. The value is an array and the selection is shown as removable tags.

Custom items

The default slot replaces the generated options. With object values, set by to compare them and display-value to control what the input shows.

Icons and trigger

Use icon for a leading icon, clearable for a clear button and show-trigger for a chevron that toggles the list.

Component

Location

Async options

The search event is emitted with the text in the input as the user types. Load the options from your API and add ignore-filter so they are not filtered a second time.

Disabled

Set disabled to prevent interaction.

Plan

Contact support to change your plan.

Form

A full form with a single and a multiple combobox.

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 \| number \| { value: any; label?: string; disabled?: boolean; group?: string })[]`	Options to render. `value` is stored in the form, `label` (defaults to the value) is displayed.
`multiple`	`boolean`	Allow selecting more than one option. The value is an array shown as tags.
`by`	`string \| ((a: any, b: any) => boolean)`	Property name or comparator used to compare object values.
`display-value`	`(value: any) => string`	Text shown for a selected value. Defaults to the label of the matching option. Needed for object values used with the default slot.
`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 selection.
`show-trigger`	`boolean`	Shows a chevron button that toggles the list.
`rules`	`any`	Vee-Validate rules (or use a schema on `useForm`).
`v-model`	`any`	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.

Events

Event	Payload	Description
`search`	`string`	Emitted with the text in the input as the user types.

Slots

Slot	Description
`default`	Replaces the generated options 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 semantics of UiCombobox, 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.

Checkbox - Native

The native checkbox allows you to do regular checkbox stuff like binding to an array of values.

VeeCurrencyInput

A currency input component that uses the composition API provided by Vee-Validate to perform validation.