Rendering
Multi-step wizard
A stepper with per-step validation, locked step navigation and a final submit button.
Loading the builder…
View the spec
{
"type": "panel",
"id": "column",
"name": "Form",
"configs": {
"key": "wizard"
},
"children": [
{
"type": "panel",
"id": "stepper",
"name": "Wizard",
"configs": {
"key": "steps",
"validateSteps": true,
"allowStepClick": false,
"showSubmit": true
},
"children": [
{
"type": "panel",
"id": "group",
"name": "Identity",
"configs": {
"key": "s1",
"label": "Identity"
},
"children": [
{
"type": "input",
"dataType": "string",
"id": "text",
"name": "Name",
"configs": {
"key": "name",
"label": "Full name"
},
"validations": [
{
"validator": "required"
}
]
},
{
"type": "input",
"dataType": "string",
"id": "email",
"name": "Email",
"configs": {
"key": "email",
"label": "Email"
},
"validations": [
{
"validator": "required"
},
{
"validator": "email"
}
]
}
]
},
{
"type": "panel",
"id": "group",
"name": "Details",
"configs": {
"key": "s2",
"label": "Details"
},
"children": [
{
"type": "input",
"dataType": "string",
"id": "phone",
"name": "Phone",
"configs": {
"key": "phone",
"label": "Phone"
}
},
{
"type": "input",
"dataType": "string",
"id": "text",
"name": "City",
"configs": {
"key": "city",
"label": "City"
},
"validations": [
{
"validator": "required"
}
]
}
]
},
{
"type": "panel",
"id": "group",
"name": "Confirm",
"configs": {
"key": "s3",
"label": "Confirm"
},
"children": [
{
"type": "output",
"dataType": "void",
"id": "content",
"name": "Content",
"configs": {
"key": "note",
"content": "Almost done — confirm and submit."
}
},
{
"type": "input",
"dataType": "boolean",
"id": "checkbox",
"name": "Consent",
"configs": {
"key": "consent",
"label": "I confirm my details"
},
"validations": [
{
"validator": "required"
}
]
}
]
}
]
}
]
}