Simple Forms
Outlined

Example 2 - outlined

A simple form with name, age and email.

Schema:

"root"
:
{1 Items
"fields"
:
[4 Items
0
:
{2 Items
"name"
:
string
"first_name"
"meta"
:
{2 Items
"displayType"
:
string
"text_field"
"displayName"
:
string
"First Name"
}
}
1
:
{2 Items
"name"
:
string
"last_name"
"meta"
:
{2 Items
"displayType"
:
string
"text_field"
"displayName"
:
string
"Last Name"
}
}
2
:
{2 Items
"name"
:
string
"age"
"meta"
:
{2 Items
"displayName"
:
string
"Age"
"displayType"
:
string
"number"
}
}
3
:
{2 Items
"name"
:
string
"email"
"meta"
:
{2 Items
"displayName"
:
string
"Email"
"displayType"
:
string
"email"
}
}
]
}

Usage:

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

Star us at github

© Copyright 2023 MuiForms.