The most dynamic form builder for React
The ultimate plug-and-play form engine for modern React apps. Build fully dynamic, schema-based forms in seconds with advanced features like conditional logic, file uploads, and real-time validation.
- Schema-Driven Forms - JSON-powered forms with zero boilerplate
- Real-Time Validation - Built-in validators + custom async validation
- Conditional Logic - Show/hide fields based on other fields' values
- File Handling - Uploads with previews (Base64/Blob/File)
- API-Driven Fields - Dynamic options from endpoints
- TypeScript Ready - Full type safety
- Performance Optimized - Debounced updates, lazy loading
- Accessibility - ARIA attributes out of the box
- Extensible - Add custom fields and validators
- Styling Freedom - Tailwind, CSS modules, or inline styles
npm install react-forminate # or yarn add react-forminateimport { DynamicForm } from "react-forminate"; const formSchema = { formId: "userForm", fields: [ { fieldId: "name", type: "text", label: "Full Name", required: true, }, { fieldId: "email", type: "email", label: "Email", required: true, validation: [{ type: "email" }], }, { fieldId: "subscribe", type: "checkbox", label: "Subscribe to newsletter", visibility: { dependsOn: "email", condition: "not_empty", }, }, ], }; export default () => ( <DynamicForm formData={formSchema} onSubmit={console.log} /> );{ fieldId: "company", type: "text", label: "Company Name", visibility: { dependsOn: "employmentStatus", condition: "equals", value: "employed" } }{ fieldId: "avatar", type: "file", accept: "image/*", storageFormat: "base64", events: { onCustomUpload: (files) => uploadToServer(files) } }{ fieldId: "products", type: "select", dynamicOptions: { endpoint: "/api/products", transformResponse: (res) => res.map(product => ({ label: product.name, value: product.id })) } }{ fieldId: "username", type: "text", validation: [ { custom: async (value) => { const available = await checkUsernameAvailability(value); return available; }, message: "Username already taken" } ] }{ formId: "userForm", options: { scrollOnErrorValidation: true, // Automatically scroll to first error field }, fields: [ // ... your fields ] }When enabled, clicking the submit button on an invalid form will automatically scroll to the first field with a validation error, providing better user experience for long forms.
Input Fields
| Type | Description | Example Use Case |
|---|---|---|
| text | Standard text input | Names, general text |
| Email input with validation | User emails | |
| password | Masked password input | Login forms |
| number | Numeric input | Age, quantity |
| tel | Telephone number input | Phone numbers |
| url | URL input with validation | Website links |
| search | Search-style input | Search boxes |
| date | Date picker | Birthdates, appointments |
| file | File upload with previews | Avatars, documents |
Selection Fields
| Type | Description | Special Features |
|---|---|---|
| select | Dropdown select | Dynamic API options |
| radio | Radio button group | Single selection |
| checkbox | Checkbox group | Multiple selection |
Layout & Structural Fields
| Type | Description | Configuration Options |
|---|---|---|
| group | Logical field grouping | Nested fields, legends |
| container | Visual wrapper (div/section) | Grid layouts, spacing |
| spacer | Vertical/horizontal spacing | Pixel-perfect gaps |
Special Fields
| Type | Description | Content Flexibility |
|---|---|---|
| gridview | Data grid with pagination | API-driven tables |
| content | Custom HTML/JSX content | Terms, rich text, components |
| textarea | Multi-line text area | Long-form content |
import { useFormValue, useFormActions, FormRegistryProvider, } from "react-forminate"; // Get single value const email = useFormValue("email", "formId"); // Access all form actions const { validateForm, setValue } = useFormActions("formId"); // Wrap your app to enable multi-form control <FormRegistryProvider> <App /> </FormRegistryProvider>;✔ Productivity - Build complex forms in minutes
✔ Maintainability - Schema-based = cleaner code
✔ Consistency - Unified validation & styling
✔ Flexibility - Extend with custom fields
For complete documentation and advanced examples, visit our documentation site.