Zod Validation Demo
Using Zod schemas for type-safe form validation
Contact Form (Zod Validation)
This form uses Zod schemas for validation. Notice how the validation rules are defined in the schema rather than in individual field configurations.
Settings Form (Zod Validation)
Two column form with complex Zod validation including enums, numbers, and custom refinements.
Zod Integration Features
✅ Type Safety
- • Full TypeScript support
- • Runtime type checking
- • Automatic type inference
- • Compile-time validation
✅ Validation Rules
- • String length validation
- • Email format validation
- • Number range validation
- • Enum validation
- • Custom refinements
✅ Error Messages
- • Custom error messages
- • Automatic field mapping
- • Real-time validation
- • Form-level errors
✅ Schema Features
- • Optional fields
- • Default values
- • Transformations
- • Nested objects
✅ Integration
- • React Hook Form resolver
- • HeroUI components
- • TypeScript support
- • Optional dependency
✅ Benefits
- • Single source of truth
- • Reusable schemas
- • Better error handling
- • Runtime safety
Code Example
// Define your schema
const contactSchema = z.object({
firstName: z.string().min(2, "First name must be at least 2 characters"),
email: z.string().email("Please enter a valid email address"),
terms: z.boolean().refine((val) => val === true, "You must agree to the terms"),
});
// Create form configuration
const config = createZodFormConfig(contactSchema, fields);
// Use in your component
<ZodForm
config={config}
onSubmit={handleSubmit}
title="Contact Form"
/>