zod-form-builder

A dynamic form builder powered by React Hook Form and Zod for schema validation.

📦 Installation

npm install zod-form-builder

or

yarn add zod-form-builder

🚀 Usage Example

1. Import and Define Your Form Fields

"use client";
import { DynamicForms } from "zod-form-builder";
import { z } from "zod";
import { FieldConfig } from "zod-form-builder/dist/types";

// Define form values type
type LoginFormValues = {
  email: string;
  password: string;
  role: "admin" | "user";
  adminCode?: string;
};

// Define form fields
const loginFields: FieldConfig<LoginFormValues>[] = [
  {
    type: "email",
    name: "email",
    label: "Email",
    validation: z.string().email("Invalid email address"),
  },
  {
    type: "password",
    name: "password",
    label: "Password",
    validation: z
      .string()
      .min(8, "Password must be at least 8 characters long"),
  },
  {
    type: "select",
    name: "role",
    label: "Role",
    validation: z.enum(["admin", "user"]),
    options: [
      { value: "admin", label: "Admin" },
      { value: "user", label: "User" },
    ],
  },
  {
    type: "text",
    name: "adminCode",
    label: "Admin Code",
    validation: z.string().optional(),
    condition: (data) => data.role === "admin", // Only show if role is "admin"
  },
];

// Handle form submission
const onSubmit = async (data: LoginFormValues) => {
  console.log("Form submitted:", data);
};

const LoginForm = () => {
  return (
    <DynamicForms<LoginFormValues>
      defaultValues={{ email: "", password: "", role: "user", adminCode: "" }}
      onSubmit={onSubmit}
      fields={loginFields}
      inputStyle="w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 "
      buttonStyle="bg-blue-500 py-2 px-5 rounded-xl "
      className="max-w-2xl mx-auto border p-5 mt-5 rounded-xl space-y-2 space-x-2"
    />
  );
};

export default LoginForm;

📚 API Reference

<DynamicForms /> Props

Prop	Type	Description
defaultValues	DefaultValues<T>	Initial form values
onSubmit	SubmitHandler<T>	Function called on form submission
fields	FieldConfig<T>[]	Array of field configurations
className	string (optional)	Additional CSS classes for the form
inputStyle	string (optional)	Custom styles for input fields
buttonStyle	string (optional)	Custom styles for the submit button

FieldConfig Properties

Property	Type	Description
type	`"text"	"email"	"password"	"select"	"radio"	"checkbox"`	Field type
name	string	Unique field name
label	string	Field label
validation	ZodType<any>	Zod validation schema
options	{ value: string; label: string }[] (optional)	Options for select, radio fields
condition	(data: T) => boolean (optional)	Function to conditionally show/hide field

🔥 Features

• Auto-validation using Zod
• Dynamic field rendering with conditional logic
• Minimal configuration with React Hook Form
• Custom styles for inputs and buttons

🤝 Contributing

Feel free to submit issues and pull requests!

📜 License

MIT License.