Installation

Install

npm install mui-forms

Peer Dependencies

"peerDependencies": {
  "react": "^18.0.0"
}

Basic Usage

Define your schema:

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

Import and use MuiForms:

import MuiForms from "mui-forms";
import schema from "<schema_location.json>";
 
<MuiForms
    name="myForm"
    schema={schema}
    onChange={(...data) => {
        // handle data on change
    }}
    onError={(...fieldData) => {
        // handle error
    }}
    onNext={(formData) => {
        // handle next
    }}
    onSubmit={(formData) => {
        // handle form submission
    }}
/>;

Basic Properties

Name	Description	Type
name	the name of the form	Optional
config	Configuration options for the form	Optional
schema	json based schema to render the form	Mandatory
controls	custom fields	Optional
components	custom interactive fields	Optional
onChange	handle to be called on field value change	Optional
onError	handle to be called on field error	Optional
onNext	handle to be called when user tries to move to next form section (grouped forms)	Optional
onPrevious	handle to be called when user tries to move to previous form section (grouped forms)	Optional
onSubmit	handle to be called on form submission	Mandatory
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.	Optional
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	Optional

Config properties

Name	Values	Default Value	Description	Type
variant	outlined, standard, filled	outlined	Specified the field outlook.	Optional
size	small, medium, large	medium	Specified the field sizes.	Optional
gapX	Any number	NA	Adds horizontal spacing between fields. All units are in rem.	Optional
gapY	Any number	NA	Adds vertical spacing between fields. All units are in rem.	Optional

Getting Started Forms