Form

Overview

Use Form to handle form submission, validation, and shared form state.

Form is useful when multiple fields need to be submitted together or validated together. It works well with Field and the form examples across the docs.

Anatomy

A form includes the form root, fields, controls, validation messages, and submit actions. Each field should have a label and a clear error message when validation fails.

Behavior

Keep submission state clear. Disable or show loading on the submit action while a request is running. Show errors near the fields that need attention.

Accessibility

Use labels, descriptions, and errors consistently. Make sure keyboard users can reach every field and submit or cancel the form.

Installation

npm

npx love-ui@latest add form

Usage

import {
  Field,
  FieldControl,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"

<Form
  onSubmit={(e) => {
    /* handle submit */
  }}
>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <FieldControl name="email" type="email" required />
    <FieldError>Please enter a valid email.</FieldError>
  </Field>
</Form>

Examples

The examples show basic form structure and schema validation with Zod.