Delphi Design

Build forms with validation and error handling.

Usage

import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@delphi/ui";

export function Example() {
  return (
    <Form>
      <FormField
        name="email"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </Form>
  );
}

API Reference

Component	Description
`Form`	Root form wrapper with context
`FormField`	Field wrapper with validation state
`FormItem`	Groups label, control, and message
`FormLabel`	Accessible label for the field
`FormControl`	Wraps the input element
`FormMessage`	Displays validation errors
`FormDescription`	Helper text for the field

Use react-hook-form for form state management

Show validation errors inline with FormMessage

Provide helpful FormDescription for complex fields

Validate on blur for better UX, not only on submit

Disable the submit button while submitting

Show validation errors before user interaction

Clear the form on validation errors — preserve input

Use alerts for field-level errors — use inline messages

Require re-entry of valid fields after errors