el-form-react-components

🎨 Zero-boilerplate React AutoForm - Generate beautiful forms instantly from Zod schemas

Perfect for developers who want plug-and-play form components that look great out of the box. Skip the tedious form building - generate complete, production-ready forms instantly.

AutoForm advantages:

- ✅ Zero boilerplate code - Define schema, get complete form UI
- ✅ Instant form generation - From Zod schema to styled form in seconds
- ✅ Production ready - Built-in validation, error handling, and accessibility
- ✅ Highly customizable - Override any component or styling

🧭 Choose the Right Package

| Package | Use When | Bundle Size | Dependencies |
| -------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | ------------ |
| el-form-react-hooks | You want full control over UI/styling | 11KB | None |
| el-form-react-components | You want pre-built components with Tailwind | 18KB | Tailwind CSS |
| el-form-react | You want both hooks + components | 29KB | Tailwind CSS |
| el-form-core | Framework-agnostic validation only | 4KB | None |

> ⚠️ Need custom styling? This package requires Tailwind CSS. If you prefer to build your own UI, use el-form-react-hooks instead - it's lighter (11KB) and has zero styling dependencies.

📦 Installation

``bash
npm install el-form-react-components


or

`bash
npm install tailwindcss
`

🎯 What's Included

- AutoForm - Automatically generate forms from Zod schemas
- Array support - Built-in support for dynamic arrays
- TypeScript types - Full type safety
- 18KB bundle size - Includes form logic + UI components
- Tailwind styling - Beautiful, customizable design

🚀 Quick Start

`tsx
import { AutoForm } from "el-form-react-components";
import { z } from "zod";

const userSchema = z.object({
firstName: z.string().min(1, "First name is required"),
lastName: z.string().min(1, "Last name is required"),
email: z.string().email("Invalid email"),
age: z.number().min(18, "Must be 18 or older"),
role: z.enum(["admin", "user", "guest"]),
hobbies: z.array(z.string()).optional(),
addresses: z
.array(
z.object({
street: z.string().min(1, "Street is required"),
city: z.string().min(1, "City is required"),
zipCode: z.string().min(1, "ZIP is required"),
})
)
.optional(),
});

function App() {
return (
schema={userSchema}
onSubmit={(data) => {
console.log("✅ Form data:", data);
}}
onError={(errors) => {
console.log("❌ Form errors:", errors);
}}
layout="grid"
columns={2}
/>
);
}
`

🛡️ Enhanced Validation System

AutoForm now supports a flexible validation system that goes beyond just Zod schemas. You can combine schema validation with custom validators for maximum flexibility.

$3

`tsx
const schema = z.object({
email: z.string().email("Invalid email"),
age: z.number().min(18, "Must be 18+"),
});

schema={schema}
onSubmit={handleSubmit}
validateOnChange={true}
validateOnBlur={true}
/>;
`

$3

`tsx
import type { ValidatorConfig } from "el-form-core";

const customValidator: ValidatorConfig = {
onChange: (context) => {
const { values } = context;
if (!values.email?.includes("@")) {
return "Email must contain @";
}
return undefined;
},
onBlur: (context) => {
// More strict validation on blur
try {
schema.parse(context.values);
return undefined;
} catch (error) {
return "Please fix validation errors";
}
},
};

schema={schema}
validators={customValidator}
onSubmit={handleSubmit}
/>;
`

$3

`tsx
const fieldValidators = {
email: {
onChangeAsync: async (context) => {
if (!context.value) return undefined;

// Simulate API call to check email availability
await new Promise((resolve) => setTimeout(resolve, 500));

if (context.value === "admin@blocked.com") {
return "This email is not available";
}

return undefined;
},
asyncDebounceMs: 300,
} as ValidatorConfig,
username: {
onChange: (context) => {
if (context.value?.includes("admin")) {
return 'Username cannot contain "admin"';
}
return undefined;
},
} as ValidatorConfig,
};

schema={schema}
fieldValidators={fieldValidators}
onSubmit={handleSubmit}
/>;
`

$3

`tsx
// Use Zod schema for basic validation + custom rules for business logic
schema={userSchema} // Base validation
validators={customGlobalValidator} // Global custom rules
fieldValidators={fieldLevelValidators} // Field-specific custom rules
validateOnChange={true}
validateOnBlur={true}
onSubmit={handleSubmit}
/>
`

🛡️ Error Handling

AutoForm provides comprehensive error handling with customization options:

$3

`tsx
const userSchema = z.object({
email: z.string().email("Please enter a valid email"),
password: z.string().min(8, "Password must be at least 8 characters"),
});

schema={userSchema}
onSubmit={(data) => console.log("Success:", data)}
onError={(errors) => console.log("Validation failed:", errors)}
/>;
`

$3

`tsx
import { AutoFormErrorProps } from "el-form-react-components";

const ElegantErrorComponent: React.FC = ({
errors,
touched,
}) => {
const errorEntries = Object.entries(errors).filter(
([field]) => touched[field]
);

if (errorEntries.length === 0) return null;

return (


// Use custom error component
schema={userSchema}
customErrorComponent={ElegantErrorComponent}
onSubmit={handleSubmit}
/>;
`

$3

Multiple pre-built error components available:

`tsx
// Minimal style
const MinimalErrorComponent = ({ errors, touched }) => (


`tsx
schema={userSchema}
fields={[
{
name: "bio",
type: "textarea",
placeholder: "Tell us about yourself...",
colSpan: 2, // Full width
},
{
name: "hobbies",
type: "array",
label: "Your Hobbies",
colSpan: 2,
},
]}
onSubmit={(data) => console.log(data)}
/>
`

🛠️ Custom Components

`tsx
import { AutoForm } from "el-form-react-components";

// Your custom input component
const CustomInput = ({ name, label, value, onChange, error, ...props }) => (


// Use custom component
schema={userSchema}
componentMap={{
text: CustomInput,
email: CustomInput,
}}
onSubmit={(data) => console.log(data)}
/>;
`

📚 API Reference

$3

- schema - Zod schema for validation _(required)_
- onSubmit - Submit handler _(required)_
- fields - Custom field configurations _(optional)_
- initialValues - Initial form values _(optional)_
- layout - "grid" or "flex" layout _(default: "flex")_
- columns - Number of columns for grid layout _(default: 12)_
- componentMap - Custom component mapping _(optional)_
- onError - Error handler _(optional)_
- customErrorComponent - Custom error display component _(optional)_

$3

- text, email, password, url - Text inputs
- number - Number input
- textarea - Multi-line text
- select - Dropdown (auto-generated from Zod enums)
- checkbox - Boolean input
- date - Date picker
- array - Dynamic arrays with add/remove buttons

🏗️ Package Structure

This is part of the el-form ecosystem:

- el-form-core - Framework-agnostic validation logic (4KB)
- el-form-react-hooks - React hooks only (11KB)
- el-form-react-components - Pre-built UI components (18KB) ← You are here
- el-form-react - Everything combined (29KB)

🪝 Need Just Hooks?

If you want to build completely custom UIs:

`bash
npm install el-form-react-hooks
`

`tsx
import { useForm } from "el-form-react-hooks";

const { register, handleSubmit, formState } = useForm({ schema });
// Build your own UI with full control
``

🔗 Links

- Documentation
- GitHub
- npm

📄 License

MIT