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"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}