Skip to content

Multi-step signup

Account details with a confirm-password check, email OTP verification, then a read-only review step with per-step edit links.

Demo only — there is no real email backend here. Enter 123456 as the verification code.

  1. 1Account
  2. 2Verify
  3. 3Review
View config
{
  "id": "multi-step-signup",
  "title": "Create your account",
  "fields": [
    {
      "type": "text",
      "name": "fullName",
      "label": "Full name",
      "required": true,
      "rules": {
        "minLength": 2
      }
    },
    {
      "type": "email",
      "name": "email",
      "label": "Email",
      "required": true
    },
    {
      "type": "password",
      "name": "password",
      "label": "Password",
      "required": true,
      "width": "half",
      "complexity": {
        "uppercase": true,
        "lowercase": true,
        "number": true,
        "minLength": 8
      }
    },
    {
      "type": "password",
      "name": "confirmPassword",
      "label": "Confirm password",
      "required": true,
      "width": "half",
      "rules": {
        "matches": "password",
        "matchesMessage": "Passwords don't match"
      }
    },
    {
      "type": "otp",
      "name": "emailOtp",
      "label": "Verification code",
      "length": 6,
      "dependsOn": "email"
    },
    {
      "type": "submit",
      "name": "submit",
      "text": "Create account"
    }
  ],
  "steps": [
    {
      "title": "Account",
      "fieldNames": [
        "fullName",
        "email",
        "password",
        "confirmPassword"
      ]
    },
    {
      "title": "Verify",
      "fieldNames": [
        "emailOtp"
      ]
    },
    {
      "title": "Review",
      "review": true
    }
  ]
}