lwc - Multi-Step Wizard

🧭 Multi-Step Wizard – Reusable Salesforce LWC

A reusable, slot-based Lightning Web Component that simplifies building multi-step forms with progress indicators, validation, navigation controls, review pages, and an imperative API—all using native Salesforce Lightning Web Components.

📖 Project Overview

Multi-Step Wizard is a production-ready Lightning Web Component that provides a complete wizard framework for Salesforce applications. Instead of building step navigation and validation logic repeatedly, developers simply define the steps and provide their own form fields while the component manages the workflow.

The wizard is completely domain-agnostic, making it suitable for any business process including record creation, onboarding, registration forms, approval workflows, surveys, checkout experiences, and guided configuration screens.

Built using native Lightning Web Components, the solution includes configurable progress indicators, automatic per-step validation, review pages, reusable step wrappers, and a clean JavaScript API for complete programmatic control.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Progress Indicator	Supports both Base (numbered) and Path (chevron) progress styles.
Step Validation	Automatically validates inputs exposing reportValidity() before advancing.
Back & Next Navigation	Built-in Previous, Next and Finish buttons.
Review Step	Create a final confirmation page before submission.
Slot-Based Design	Embed any Lightning components or HTML inside wizard steps.
Imperative API	Includes next(), previous(), goToStep(), reset() and reportValidity().
Custom Events	Dispatches stepchange and complete events.
Reusable	Works with any Salesforce object or business process.

🏗 Component Architecture

📁 Project Structure

force-app/main/default/
│
├── classes
│   ├── WizardController.cls
│   └── WizardControllerTest.cls
│
└── lwc
    ├── multiStepWizard
    ├── wizardStep
    └── wizardDemo

⚙️ Component Attributes

Attribute	Purpose
progress-type	Choose base or path progress indicator.
hide-progress-indicator	Hide the step indicator.
hide-footer	Hide built-in navigation buttons.
allow-step-navigation	Allow users to revisit completed steps.
previous-label	Custom Previous button text.
next-label	Custom Next button text.
finish-label	Custom Finish button text.

🛠 Imperative API

• next() — Validate current step and move forward.
• previous() — Navigate to the previous step.
• goToStep(name) — Jump directly to a named step.
• reset() — Reset the wizard to the first step.
• reportValidity() — Trigger validation for the active step.

📡 Events

Event	Description
stepchange	Raised whenever the active wizard step changes.
complete	Raised after the user finishes the final step.

🔄 Wizard Flow

Start Wizard
      │
      ▼
Step 1
      │
Validate
      ▼
Step 2
      │
Validate
      ▼
Step 3
      │
      ▼
Review
      │
      ▼
Complete Event
      │
      ▼
Save Business Data

🎯 Business Use Cases

• Customer Registration
• Lead Qualification
• Contact Creation
• Employee Onboarding
• Insurance Applications
• Loan Processing
• Case Intake Forms
• Checkout & Payment Flows
• Approval Processes
• Survey Applications

🚀 Deployment

sf org login web --alias myOrg

sf project deploy start \
--source-dir force-app \
--target-org myOrg

sf apex run test \
--class-names WizardControllerTest

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The Multi-Step Wizard provides a clean, reusable foundation for creating guided user experiences in Salesforce. With configurable progress indicators, automatic validation, slot-based content, review screens, an imperative JavaScript API, and custom events, it enables developers to build scalable wizard-driven applications while keeping business logic separate from navigation and presentation.