FormForge

Documentation

FormForge

Beautiful, accessible forms for modern web apps

FormForge is a comprehensive form library built for React applications that combines the power of React Hook Form with Zod validation to create type-safe, accessible, and beautiful forms with minimal boilerplate.

Key Features

  • Type Safety: Full TypeScript support with Zod schema validation
  • Accessibility: Built-in ARIA attributes and keyboard navigation
  • Customizable: Flexible theming with Tailwind CSS
  • Developer Experience: Minimal setup, maximum productivity
  • Performance: Optimized rendering with React Hook Form

Quick Start

Here's a simple example of how to create a form with FormForge:

Preview

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, FormProvider } from "react-hook-form";
import { z } from "zod";
import InputField from "@/components/ui/InputField";

const formSchema = z.object({
  email: z.string().email({ message: "Invalid email address." }),
  password: z.string().min(8, { message: "Password must be at least 8 characters." }),
});

export default function ExampleForm() {
  const methods = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)} className="space-y-4">
        <InputField name="email" label="Email" type="email" placeholder="you@example.com" />
        <InputField name="password" label="Password" type="password" placeholder="••••••••" />
        <button type="submit" className="form-button form-button-primary">Submit</button>
      </form>
    </FormProvider>
  );
}

Installation

npm install formforge react-hook-form @hookform/resolvers zod

Next Steps

Explore the components in the sidebar to see all available form fields and their configurations. Each component includes live examples, code snippets, and detailed documentation.