Form Wizard

Stepper Component

The Stepper is a reusable, fully controlled component that renders a step indicator bar for multi-step forms. It accepts three props:

• steps — array of step objects, each with a title and optional description
• currentStep — zero-based index of the active step
• orientation — "horizontal" or "vertical" layout

Completed steps are marked with a checkmark, the active step is highlighted with the primary color, and future steps are rendered in a muted state.

Usage

Manage the active step with useState and pass navigation handlers to your step content:

import { useState } from "react";
import { Stepper } from "@dashboardpack/core/components/shared/stepper";

const steps = [
  { title: "Account", description: "Create your account" },
  { title: "Profile", description: "Set up your profile" },
  { title: "Review", description: "Confirm your details" },
];

export function WizardExample() {
  const [currentStep, setCurrentStep] = useState(0);

  function handleNext() {
    setCurrentStep((s) => Math.min(s + 1, steps.length - 1));
  }

  function handleBack() {
    setCurrentStep((s) => Math.max(s - 1, 0));
  }

  return (
    <div className="space-y-6">
      <Stepper steps={steps} currentStep={currentStep} orientation="horizontal" />
      {/* Render step content based on currentStep */}
      <div className="flex gap-3">
        <button onClick={handleBack} disabled={currentStep === 0}>Back</button>
        <button onClick={handleNext} disabled={currentStep === steps.length - 1}>Next</button>
      </div>
    </div>
  );
}

Wizard Demos

Three ready-made wizard demos are available at /forms/wizard:

• Checkout — horizontal layout, 4 steps: Shipping, Payment, Review, Confirmation
• Account Setup — horizontal layout, 4 steps: Basics, Profile, Preferences, Done
• Job Application — vertical layout, 5 steps: Personal Info, Experience, Education, Documents, Submit

Validation

Each wizard demo uses strict per-step validation with react-hook-form and Zod. The Next button is gated behind a call to form.trigger(), which validates only the fields visible in the current step. Navigation to the next step only proceeds if all current-step fields pass their Zod schema rules, preventing users from skipping required information.