Grouped Forms
Stepper

Stepper forms

Schema:

{
fields
:
[
0
:
{
name
:
"basic_details"
meta
:
{
type
:
"section"
displayName
:
"Basic Details"
}
fields
:
[
0
:
{
name
:
"first_name"
meta
:
{
}
}
1
:
{
name
:
"last_name"
meta
:
{
}
}
]
}
1
:
{
name
:
"other_details"
meta
:
{
type
:
"section"
displayName
:
"Other Details"
}
fields
:
[
0
:
{
name
:
"age"
meta
:
{
}
}
1
:
{
name
:
"email"
meta
:
{
}
}
]
}
]
}

Usage:

import React from "react";
import schema from "<your_schema.json>";
import MuiForms from "mui-forms";
 
function MyWizard() {
    return (
        <MuiForms
            sectionLayout="stepper"
            config={{
                variant: "filled"
            }}
            schema={schema}
            onSubmit={() => {
                // do nothing
            }}
        />
    );
}

Star us at github

© Copyright 2023 MuiForms