Home

Form Example

This page demonstrates our custom form components built with TanStack Form and Zod validation. The form includes real-time validation, async validation, loading states, and modern styling with DaisyUI.

Contact Form

Fill out the form below to see the custom form components with Zod validation in action. Try submitting to see the loading state and validation errors.

Form Features

Zod Validation

Schema-based validation with Zod for type-safe, declarative validation rules

Loading States

Beautiful loading indicators during form submission

Type Safe

Full TypeScript support with type-safe form handling

Try These Examples

Zod Validation Testing

  • •Leave fields empty to see required validation
  • •Enter "error" in first name (blocked by schema)
  • •Enter "admin" in first name for async validation
  • •Enter invalid email format
  • •Try single character names (min length validation)

Form Behavior

  • •Form starts with default values
  • •Submission shows loading state
  • •Data is logged to console
  • •Success message shows form data