Hero Hook Form Documentation
Build beautiful, type-safe forms with React Hook Form and HeroUI components. Featuring comprehensive validation, multiple layouts, and seamless integration.
🚀 Getting Started
Learn how to install, configure, and create your first form with Hero Hook Form.
Read Guide🧩 Components
Explore all available field components and their configuration options.
View Components⚙️ Configuration
Learn about global configuration, providers, and customization options.
Configure📝 Form Builder
Discover the ConfigurableForm component for rapid form development.
Learn More✅ Validation
Master form validation with built-in rules and custom validators.
Validate Forms🎨 Layouts
Explore different form layouts: vertical, horizontal, and grid configurations.
View LayoutsKey Features
Type Safety
Full TypeScript support with automatic type inference from your form schemas.
Multiple Field Types
Input, Textarea, Select, Radio, Checkbox, Switch, and more with HeroUI styling.
Flexible Layouts
Vertical, horizontal, and grid layouts with responsive design.
Built-in Validation
Comprehensive validation with React Hook Form integration and custom rules.
Global Configuration
Set defaults across your entire application with the ConfigProvider.
ConfigurableForm
Rapid form development with declarative field configurations.
Quick Example
import { ConfigurableForm } from "@rachelallyson/hero-hook-form";
const fields = [
{
name: "firstName",
type: "input",
label: "First Name",
rules: { required: "First name is required" },
},
{
name: "email",
type: "input",
label: "Email",
inputProps: { type: "email" },
rules: {
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "Invalid email address"
}
},
},
{
name: "plan",
type: "select",
label: "Plan",
options: [
{ label: "Free", value: "free" },
{ label: "Pro", value: "pro" },
{ label: "Team", value: "team" },
],
},
];
<ConfigurableForm
title="Contact Form"
fields={fields}
onSubmit={handleSubmit}
layout="grid"
columns={2}
showResetButton={true}
/>