ConfigurableForm Demo
This demonstrates the new ConfigurableForm component that allows you to create forms by simply defining field configurations. No need to manually wire up each field!
Grid Layout (2 columns)
Vertical Layout
Horizontal Layout
Usage 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"
}
},
},
// ... more fields
];
<ConfigurableForm
title="Contact Form"
fields={fields}
onSubmit={handleSubmit}
layout="grid"
columns={2}
showResetButton={true}
/>