Form

vee-validate form primitives wrapped to match the design system. Use FormField + FormItem + FormControl + FormLabel + FormMessage to build accessible forms with built-in validation rendering.

When to use Form vs Field

Use Form (vee-validate) when you want a validation schema, async checks, and field-level error handling. Use the simpler Field primitive for layout-only wrappers without validation infrastructure.

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
</script>

<template>
  <Form>
    <FormField>
      <FormItem>
        <FormLabel />
        <FormControl />
        <FormDescription />
        <FormMessage />
      </FormItem>
    </FormField>
  </Form>
</template>

Default

Single FormField bound through vee-validate.

Multiple fields

Several FormFields stacked inside one Form, each with its own state.

With validation

Per-field rules surface errors through FormMessage on submit.

API Reference

Props, events, and slots for each sub-component.

Form

Props

Prop	Type	Default	Description
validation-schema	object	—	vee-validate / zod / yup schema.
initialValues	object	—	Starting form values.

FormField

Props

Prop	Type	Default	Description
name	string	—	Field name (path) in the form state.
rules	object \| function	—	Per-field validation.

Slots

Slot	Description
default	Scoped slot providing { componentField, errorMessage, value, handleChange }.

FormFieldArray

Props

Prop	Type	Default	Description
name	string	—	Path to an array field in the form state.

Slots

Slot	Description
default	Scoped slot providing { fields, push, remove, swap, ... } for repeatable rows.

FormItem

Props

Prop	Type	Default	Description
class	string	—	Wraps one field; provides an id via context so Label and Control link up automatically.

FormLabel

Props

Prop	Type	Default	Description
class	string	—	Label bound to the FormItem control. Turns destructive when the field has an error.

FormControl

Slots

Slot	Description
default	The input element. FormControl wires its id, aria-describedby, and aria-invalid from the field state.

FormDescription / FormMessage

Props

Prop	Type	Default	Description
class	string	—	Description is helper text; FormMessage renders the current validation error for the field.

Flag Grid Fill