Stepper Forms
Schema:
"root"}
:
{1 Items"fields"]
:
[2 Items0}
:
{3 Items"name"
:
string
"basic_details"
"meta"}
:
{2 Items"type"
:
string
"section"
"displayName"
:
string
"Basic Details"
"fields"]
:
[2 Items0}
:
{2 Items"name"
:
string
"first_name"
"meta"
:
{…
}2 Items1}
:
{2 Items"name"
:
string
"last_name"
"meta"
:
{…
}2 Items1}
:
{3 Items"name"
:
string
"other_details"
"meta"}
:
{2 Items"type"
:
string
"section"
"displayName"
:
string
"Other Details"
"fields"]
:
[2 Items0}
:
{2 Items"name"
:
string
"age"
"meta"
:
{…
}2 Items1}
:
{2 Items"name"
:
string
"email"
"meta"
:
{…
}2 ItemsUsage:
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
}}
/>
);
}