manojadams / mui-forms

Material UI forms using json based schema

Create advanced material forms

About

Create beautiful advanced forms with a JSON-based schema

Advantages and features

• Material UI components
• Built-in layouting
• Responsive
• Support for custom components
• Easily define field relationships and build advanced forms
• Load data from API
• Extensible
• Simple forms
• Wizard forms
• Stepper forms
• Mobile-ready
• Production-ready

Installation

npm install mui-forms

Documentation

Visit the following page for detailed documentation: https://mui-forms.vercel.app

Basic Usage

1. Define your JSON schema

const exampleSchema = {
    "fields": [{
        "name": "first_name",
        "meta": {
            "displayType": "text",
            "displayName": "First Name"
        }
    }, {
        "name": "last_name",
        "meta": {
            "displayType": "text",
            "displayName": "Last Name"
        }
    }]
}

2. Usage

import React from 'react';
import MuiForms from 'mui-forms';
import exampleSchema from '<example-schema.json>';

export function MyForm() {
    return (
        <MuiForms
            schema={exampleSchema}
            onSubmit={(formData) => {
              // submit data
            }}
        />
    );
}

Input Properties

Name	Description
className	Name of class attribute assigned to the root form element
name	The name of the form
config	Configuration options for the form. Read more
data	Contains initial form data values when the form is loaded. Read more
schema	JSON-based schema for rendering the form. Read more
controls	Custom fields. Read more
components	Custom template components mapped with schema using displayType property as template. Read more
pageNumber	The default tab on opening the form (grouped form)
lastPageNumber	The last page number will exclude any tabs that appear after the lastPageNumber tab
onChange	A function that will be called whenever the value of a field changes. The second parameter provided to this function contains the complete form data.
onError	A function that will be called whenever there is an error with a field.
onNext	A function that will be called when when the user attempts to navigate to the next section of a grouped form
onPrevious	A function that will be called when when the user attempts to navigate to the previous section of a grouped form
onSubmit	A function that will be called when the form is submitted
changeResponseMode	Value: "form-data", "section-data", "default". form-data: onChange event will pass all the form data as a second parameter. section-data: onChange event will pass all the section data as a second parameter
nextResponseMode	Value: "form-data", "page-data" form-data: onNext event will send all the form data (onNext). page-data: onNext event will send all the date of the current page. Note: onNext is triggered on click of Next button

Mandatory properties

• schema
• onSubmit

Schema details

Check out details here https://mui-forms.vercel.app/schema

Change logs

• fix #80: preload data not working for fields with no prop
• fix #104: fix footer next button text

Contributions

To contribute, you can fork the repo, make your changes and submit a PR/MR to the master branch.

You can contribute in many ways:

• Work on features/enhancements
• Work on bug fixes
• Improve on existing functionalities
• Improve documentation
• Add more examples/improve existing example
• Participate in discussions
• Provide your valuable feedback/suggestions.

Give a ⭐️ if you liked this project!

License

MIT © manojadams