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