PrimeVue Forms

Form state management and validation for PrimeVue. Provides <Form> and <FormField> components backed by the useForm() composable. PrimeVue inputs register themselves automatically when placed inside a <Form>, no extra wiring needed.

Basic usage

<Form :resolver="zodResolver(schema)" :initialValues="{ email: '' }" @submit="onSubmit">
    <FormField name="email" v-slot="{ invalid, error }">
        <InputText name="email" :invalid="invalid" />
        <small v-if="error">{{ error.message }}</small>
    </FormField>
    <Button type="submit" label="Submit" />
</Form>

Validation

Resolvers are provided by @primeuix/forms and wrap Zod, Yup, Valibot, Joi, and Superstruct:

import { zodResolver } from '@primeuix/forms/zod';
import { z } from 'zod';

const schema = z.object({
    email: z.string().email(),
    age: z.number().min(18)
});

Validation timing is configurable per form or per field:

<Form
    :resolver="zodResolver(schema)"
    :validateOnValueUpdate="false"
    :validateOnBlur="true"
>

useForm composable

For imperative control or use outside <Form>:

import { useForm } from '@primevue/forms';

const { defineField, handleSubmit, valid, states } = useForm({
    initialValues: { name: '' },
    resolver: zodResolver(schema)
});

const [nameField, nameProps] = defineField('name');

Field state

Each field tracks: value, touched, dirty, pristine, valid, invalid, error, errors. The form exposes valid (all fields valid) and states (nested view of all field state).

License

Licensed under the PrimeUI License - Copyright (c) PrimeTek Informatics