✦ Open Source · TypeScript · React

Schema-first
forms for React

Define your form in a plain config object. FormForge handles UI, validation, layout, accessibility, and themes — automatically.

Get Started →GitHub
246
Tests passing
8
Packages
3
Built-in themes
schema.ts
const schema = {
  name:  { type: 'text',  label: 'Full Name',    required: true },
  email: { type: 'email', label: 'Email',         required: true },
  role:  { type: 'select',
    options: [
      { value: 'dev',      label: 'Developer' },
      { value: 'designer', label: 'Designer' },
    ],
  },
  bio:   { type: 'textarea', label: 'Short Bio' },
}

// That's it. Render with:
<FormForge schema={schema} theme="modern" />
✓ Accessible✓ Validated✓ Responsive

Everything you need

FormForge ships with a complete set of primitives for building production-grade forms.

⚡

Zero Config UI

Drop in a schema and get a fully-rendered form with labels, inputs, error states, and submit handling — no code required.

✅

Smart Validation

Built-in rules for email, URL, regex, min/max, and more. Async validators and Zod adapter included out of the box.

🎨

3 Built-in Themes

Choose from Modern, Minimal, or Enterprise themes — or build your own with a clean token system.

♿

Accessibility First

aria-required, aria-invalid, aria-describedby, role="alert", focus management — all automatic.

🔌

Headless Mode

Use useFormForge, useField, or createForm() to build completely custom UI with FormForge's engine.

📦

Tiny Bundle

Tree-shakeable ESM packages. Import only what you use. Core runtime is under 4kb gzipped.

A schema. A complete form.

No JSX. No event handlers. No state management. Just a config object.

ContactForm.tsx
import { FormForge } from '@formforges/react'

const schema = {
  firstName: { type: 'text',  label: 'First Name', required: true },
  lastName:  { type: 'text',  label: 'Last Name',  required: true },
  email:     { type: 'email', label: 'Email',      required: true },
  message:   { type: 'textarea', label: 'Message' },
}

export function ContactForm() {
  return (
    <FormForge
      schema={schema}
      theme="modern"
      onSubmit={async (values) => {
        await sendContact(values)
      }}
    />
  )
}
Auto-layout · ARIA labels · Error handling included

Build forms, faster.

Zero setup. Full control. Open source and free forever.

Read the Docs →★ Star on GitHub

MIT License · TypeScript · React 18+