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