React-Forminate

---

The missing link between configuration and complex forms in React

First form preview

This code example demonstrates Basic form example using React-Forminate with a text input field, live validation, and form submission handling. in React-Forminate.

Key features shown: DynamicForm component usage, Text input field configuration, Form submission handling, Real-time validation, Console logging of form values, Basic form structure

0 lines

import { DynamicForm } from "react-forminate";

export const FirstFormPreview = () => {
  return (
    <DynamicForm
      formData={{
        formId: "firstForm",
        fields: [
          {
            fieldId: "demo",
            type: "text",
            label: "Text field",
            placeholder: "Try typing here",
            description: "This live demo reacts like a real form",
          },
        ],
      }}
      onSubmit={(values, isValid) => console.log("Form values:", values, isValid)}
    />
  );
};

Typescript

1import { DynamicForm } from "react-forminate";
2
3export const FirstFormPreview = () => {
4  return (
5    <DynamicForm
6      formData={{
7        formId: "firstForm",
8        fields: [
9          {
10            fieldId: "demo",
11            type: "text",
12            label: "Text field",
13            placeholder: "Try typing here",
14            description: "This live demo reacts like a real form",
15          },
16        ],
17      }}
18      onSubmit={(values, isValid) => console.log("Form values:", values, isValid)}
19    />
20  );
21};

Why This Exists

Most form libraries force you to choose:

• Simple setup (but limited features)
• Full control (with complex boilerplate)

React Forminate gives you both through:

1. A declarative JSON schema
2. Escape hatches for custom logic

How It Feels to Use

1. Define your form structure in JSON/TypeScript
2. Render with <DynamicForm>
3. Extend with plugins when needed

# The moment you’ll fall in love:
npm install react-forminate
# Then watch 100 lines of form code shrink to 10