Form

Forms

A form wrapper component that provides validation context and submission handling. Works with FormField components for structured form layouts.

Import

import { 
  Form, 
  FormField, 
  FormLabel, 
  FormDescription, 
  FormMessage, 
  FormSubmit 
} from "@/components/ui/form";

Form with validation and submission handling

Multi-field contact form example

Available form building blocks

FormField

Wrapper for individual form fields. Provides context for validation errors.

FormLabel

Label component with optional required indicator.

FormDescription

Helper text displayed below the input field.

FormMessage

Displays validation error messages automatically from context.

FormSubmit

Submit button that shows loading state during submission.

Prop	Type	Default	Description
`onSubmit`	`(data: FormData) => void \| Promise<void>`	undefined	Callback when form is submitted
`onValidate`	`(data: FormData) => Record<string, string>`	undefined	Validation function returning errors object
`children*`	`ReactNode`	—	Form content including FormField components