Getting Started with MuiForms
What is MuiForms?
MuiForms is a powerful JSON-schema based form builder for React. It eliminates the need to write repetitive form HTML and validation logic.
Describe your entire form as JSON, and MuiForms takes care of rendering, validation, state management, and API integration.
Key Features
| Feature | Benefit |
|---|---|
| JSON-based Schema | Define forms without JSX - easier to maintain and test |
| Material-UI Components | Beautiful, responsive fields powered by MUI |
| Built in layouting | Out of the box layouting support |
| Conditional Logic | Show/hide fields, define advanced field dependencies without writing any code |
| API Integration | Load dropdown options using api |
| Responsive Design | Mobile-friendly with responsive layout controls |
| Custom Fields | Extend with your own field types |
| TypeScript Support | Full type safety and IDE autocompletion |
| Production status | Production ready |
What You'll Learn
Following this guide, you'll learn how to:
✅ Create your first form with MuiForms
✅ Define field validation rules
✅ Handle form submission
✅ Load data from APIs
✅ Create conditional fields
✅ Build multi-step forms
✅ Customize styling and layout
Basic Example: Registration Form
Try It Live
Click the link below to edit this form on CodeSandbox and try different configurations:
Edit in CodeSandbox → (opens in a new tab)
Schema Structure
Here's the JSON schema that powers the registration form above:
Understanding the Schema
- fields: Array of form fields
- name: Unique identifier for the field (used in form submission)
- meta: Field configuration (display name, type, validation)
- displayName: Label shown to users
- displayType: The input type (text, email, select, etc.)
- validation: Validation rules (required, pattern, etc.)
- dependencies: Define dynamic field relationships to derive complex field behaviour
Basic Usage
import MuiForms from "mui-forms";
import schema from "./schema.json";
function MyForm() {
const handleSubmit = (formData) => {
console.log("Form submitted:", formData);
// Send to API, handle response, etc.
};
return (
<MuiForms
schema={schema}
onSubmit={handleSubmit}
/>
);
}
export default MyForm;Passing Data
// With TypeScript
import { FormData, MuiFormsProps } from "mui-forms";
const handleSubmit = (data: FormData) => {
// data.firstName, data.email, etc.
console.log(data);
};
<MuiForms schema={schema} onSubmit={handleSubmit} />Processing Form Submission
Basic Submission
const handleSubmit = (formData) => {
console.log("Your form data:", formData);
// Submit to your API
fetch("/api/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData)
})
.then(r => r.json())
.then(data => {
console.log("Success:", data);
// Show success message, redirect, etc.
})
.catch(error => {
console.error("Error:", error);
// Handle error
});
};With Error Handling
const handleSubmit = (data) => {
// Validation passed, form is ready
};
const handleError = (errors, section, field) => {
// Validation failed
console.log("Validation errors:", section, field, errors);
// Show error messages to user
};
<MuiForms
schema={schema}
onSubmit={handleSubmit}
onError={handleError}
/>With Loading State
function MyForm() {
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = async (data) => {
setIsLoading(true);
try {
const response = await fetch("/api/register", {
method: "POST",
body: JSON.stringify(data)
});
const result = await response.json();
console.log("Success:", result);
} catch (error) {
console.error("Error:", error);
} finally {
setIsLoading(false);
}
};
return (
<MuiForms
schema={schema}
onSubmit={handleSubmit}
isLoading={isLoading}
/>
);
}Next Steps
1. Installation
Set up MuiForms in your project. Installation Guide →
2. Understand Schemas
Learn how to structure forms with JSON schemas. Schema Guide →
3. Add Validation
Validate your forms with built-in rules. Validation Guide →
4. Explore Field Types
Discover all available field types. Field Types →
5. Advanced Features
Build complex forms with dependencies and API integration. Field Dependencies → API Integration →
Common Patterns
Conditional Fields
Show field Tax ID only if field with name accountType has value business
{
"name": "businessTaxId",
"meta": {
"displayName": "Tax ID",
"displayType": "text",
"dependencies": {
"exists": {
"ref": "accountType",
"value": "business"
}
}
}
}Cascading Dropdowns
Load states based on selected country:
{
"fields": [{
"name": "country",
"meta": {
"displayType": "select",
"options": [{
"label": "Country1",
"value": "1"
}, {
"label": "Country2",
"value": "2"
}]
}
}, {
"name": "state",
"meta": {
"displayType": "select",
"config": {
"url": "/api/states",
"queryParams": [["country", {"type": "fieldValue", "ref": "country"}]],
"labelKey": "name"
},
"dependencies": {
"options": { "ref": "country" }
}
}
}]
}Custom Styling
Global form configuration:
<MuiForms
schema={schema}
config={{
variant: "filled",
size: "small",
gapX: 1.5,
gapY: 2
}}
onSubmit={handleSubmit}
/>Frequently Asked Questions
Q: Do I need Material-UI installed? A: Yes, MuiForms uses MUI components. It's included as a peer dependency.
Q: Can I use custom fields? A: Yes! Create your own field components and register them.
Q: Is TypeScript supported? A: Yes, full TypeScript support with complete type definitions.
Q: Can I validate on the server?
A: Yes, use error handling in the onSubmit and onNext callback.
Q: How do I style fields? A: Use global config or pass MUI theme customization.
Built Using
Support & Community
Star us on GitHub to show your support: https://github.com/manojadams/mui-forms (opens in a new tab)
Join the community: