Stepper

A horizontal progress indicator for multi-step workflows. Shows numbered steps with labels and highlights the currently active step.

Import


import { Stepper } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Stepper";

Props

Prop	Type	Required	Default	Description
`activeStep`	`number`	✅	—	Zero-based index of the current step
`steps`	`string[]`	—	`[]`	Array of step label strings
`locale`	`string`	—	—	Locale for translations

Usage


import { Stepper } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Stepper";
import { useState } from "react";
 
export default function ImportWizard() {
  const [step, setStep] = useState(0);
 
  const steps = ["Upload File", "Map Columns", "Preview", "Confirm"];
 
  return (
    <div>
      <Stepper activeStep={step} steps={steps} locale="en" />
 
      {/* Step content */}
      {step === 0 && <UploadStep />}
      {step === 1 && <MapStep />}
      {step === 2 && <PreviewStep />}
      {step === 3 && <ConfirmStep />}
 
      <button onClick={() => setStep(s => s + 1)}>Next</button>
    </div>
  );
}

Stepper

Import

Props

Usage

Related