Stepper (Wizard) — Layout Controls

Minimal Example

{
  "id": "onboarding-wizard",
  "type": "stepper",
  "order": 1,
  "width": "full",
  "settings": {
    "steps": [
      { "id": "step-account",  "label": "Account",    "sectionId": "sec-account" },
      { "id": "step-profile",  "label": "Profile",    "sectionId": "sec-profile" },
      { "id": "step-confirm",  "label": "Confirm",    "sectionId": "sec-confirm" }
    ],
    "allowBackNavigation": true
  }
}

Settings Reference

Setting	Type	Default	Description
`steps`	Step[]	—	Array of step definitions
`allowBackNavigation`	boolean	true	Allow users to click Back to go to previous steps
`allowSkip`	boolean	false	Allow advancing without filling required fields
`validateOnNext`	boolean	true	Run validation before allowing Next
`orientation`	`horizontal` \| `vertical`	`horizontal`	Step indicator orientation
`showStepNumbers`	boolean	true	Show step numbers in the indicator
`showStepIcons`	boolean	false	Show icons instead of numbers in completed steps
`nextLabel`	string	`"Next"`	Label for the Next button
`backLabel`	string	`"Back"`	Label for the Back button
`finishLabel`	string	`"Submit"`	Label for the button on the last step

Step Object Schema

interface StepDefinition {
  id: string;              // Unique step identifier
  label: string;           // Step indicator label
  sectionId: string;       // Form section to show for this step
  icon?: string;           // FontAwesome class (shown in indicator)
  optional?: boolean;      // Mark step as optional (shows badge)
  description?: string;    // Sub-label below step name in indicator
}

Step Validation

When validateOnNext: true (default), clicking Next triggers validation of all required fields in the current step's section. The step does not advance if any validation errors are present:

// Validation runs on controls in sectionId: "sec-account"
// All required fields in sec-account must pass before advancing to step 2

// To allow partial filling (and validate only on final submit):
"validateOnNext": false,
"allowSkip": true

5-Step Application Wizard

{
  "id": "loan-application",
  "type": "stepper",
  "settings": {
    "orientation": "horizontal",
    "validateOnNext": true,
    "allowBackNavigation": true,
    "finishLabel": "Submit Application",
    "steps": [
      {
        "id": "step-personal",
        "label": "Personal",
        "description": "Your details",
        "sectionId": "sec-personal",
        "icon": "fa-solid fa-user"
      },
      {
        "id": "step-financial",
        "label": "Financial",
        "description": "Income & expenses",
        "sectionId": "sec-financial",
        "icon": "fa-solid fa-dollar-sign"
      },
      {
        "id": "step-employment",
        "label": "Employment",
        "description": "Job history",
        "sectionId": "sec-employment",
        "icon": "fa-solid fa-briefcase"
      },
      {
        "id": "step-documents",
        "label": "Documents",
        "description": "Upload files",
        "sectionId": "sec-documents",
        "icon": "fa-solid fa-file-upload",
        "optional": true
      },
      {
        "id": "step-review",
        "label": "Review",
        "description": "Confirm and submit",
        "sectionId": "sec-review",
        "icon": "fa-solid fa-check"
      }
    ]
  }
}

Vertical Stepper

Vertical orientation places the step indicator on the left side, with step content on the right. Best for forms with many steps or long step labels:

{
  "settings": {
    "orientation": "vertical",
    "showStepIcons": true,
    "steps": [...]
  }
}

Submit on Last Step

The stepper's "Next" button on the last step becomes the "Submit" (or finishLabel) button. It triggers the form's submit action. Wire the form's submit action in the actions[] array as normal — the stepper calls it automatically on finish.

← Card Container Next: Collapsible Panel →