Basic Usage

Getting started with React Forminate is straightforward. All you need is a simple form schema and the DynamicForm component.

---

✨ Quick Start Example

Here’s a minimal example to help you hit the ground running:

Sample Form

This code example demonstrates Simple form example with name, email, and date fields using React-Forminate, featuring validation and submission handling. in React-Forminate.

Key features shown: Multiple field types (text, date), Required field validation, Form submission handling, Type-safe form schema, Console logging for debugging

0 lines

import { DynamicForm } from "react-forminate";
import type { FormDataCollectionType } from "react-forminate";

const formSchema: FormDataCollectionType = {
  formId: "simpleForm",
  title: "Simple Form Example",
  fields: [
    {
      fieldId: "name",
      label: "Name",
      type: "text",
      required: true,
      placeholder: "Enter your name",
    },
    {
      fieldId: "email",
      label: "Email",
      type: "text",
      required: true,
      placeholder: "Enter your email",
    },
    {
      fieldId: "dob",
      label: "Date of Birth",
      type: "date",
    },
  ],
};

export const App = () => {
  const handleSubmit = (values: any, isValid: boolean) => {
    console.log("Form Data:", values, "Is Valid:", isValid);
  };
  return <DynamicForm formData={formSchema} onSubmit={handleSubmit} />;
};

Typescript

1import { DynamicForm } from "react-forminate";
2import type { FormDataCollectionType } from "react-forminate";
3
4const formSchema: FormDataCollectionType = {
5  formId: "simpleForm",
6  title: "Simple Form Example",
7  fields: [
8    {
9      fieldId: "name",
10      label: "Name",
11      type: "text",
12      required: true,
13      placeholder: "Enter your name",
14    },
15    {
16      fieldId: "email",
17      label: "Email",
18      type: "text",
19      required: true,
20      placeholder: "Enter your email",
21    },
22    {
23      fieldId: "dob",
24      label: "Date of Birth",
25      type: "date",
26    },
27  ],
28};
29
30export const App = () => {
31  const handleSubmit = (values: any, isValid: boolean) => {
32    console.log("Form Data:", values, "Is Valid:", isValid);
33  };
34  return <DynamicForm formData={formSchema} onSubmit={handleSubmit} />;
35};
36

💡 How It Works

• DynamicForm: Renders the form based on the provided formData schema.
• formData: A JSON object that defines the fields, labels, types, and validation rules.
• onSubmit: A callback function that receives the form values and a validity flag when the user submits the form.

✅ Notes

• There's no need to manually manage state — react-forminate handles it internally.
• This setup does not require wrapping in FormProvider unless you're using useForm() manually.
• You can customize styles and field behavior as needed — see the Field Components and Customization sections for more advanced use cases.