Hero Hook Form API / ZodForm

Function: ZodForm()

ZodForm<T>(props): Element

Defined in: components/ZodForm.tsx:121

ZodForm component for building type-safe forms with Zod validation.

Type Parameters

T

T extends FieldValues

The form data type inferred from the Zod schema

Parameters

props

ZodFormProps<T>

Component props

Returns

Element

The rendered form component with validation and error handling

Description

This component provides a complete form solution with automatic validation, error handling, and type safety. It integrates React Hook Form with Zod schemas and HeroUI components. The form automatically validates inputs based on the provided Zod schema and displays error messages inline.

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  email: z.string().email("Please enter a valid email"),
  name: z.string().min(2, "Name must be at least 2 characters"),
  message: z.string().min(10, "Message must be at least 10 characters"),
});
 
function ContactForm() {
  const handleSubmit = async (data) => {
    console.log("Form submitted:", data);
    // Handle form submission (e.g., API call)
  };
 
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.input("name", "Name"),
          FormFieldHelpers.input("email", "Email", "email"),
          FormFieldHelpers.textarea("message", "Message"),
        ],
      }}
      onSubmit={handleSubmit}
      title="Contact Us"
      subtitle="Send us a message and we'll get back to you"
    />
  );
}

Grid layout with multiple columns:


<ZodForm
  config={{ schema, fields }}
  layout="grid"
  columns={2}
  spacing="6"
/>

See

Form for the base form component without Zod
FormFieldHelpers for field creation helpers
createBasicFormBuilder for builder pattern alternative