Skip to main content

Event Handling

Event Handling​

The FormWizard component provides the following event handling options:

EventDescription
onCompleteCalled when the finish action succeeds. In v1, this callback can receive optional wizard data: (data?: WizardData) => void.
onTabChangeCalled when the active tab changes with payload { prevIndex, nextIndex, stepId? }.

onComplete​

onComplete fires after finish is triggered on a valid final step.

Example usage:

import type { WizardData } from "react-form-wizard-component";

const handleComplete = (data?: WizardData) => {
  console.log("Wizard completed with data:", data);
};

<FormWizard onComplete={handleComplete}>{/* ... */}</FormWizard>;

onTabChange​

onTabChange fires whenever navigation changes the active step.

Example usage:

const handleTabChange = ({
  prevIndex,
  nextIndex,
  stepId,
}: {
  prevIndex: number;
  nextIndex: number;
  stepId?: string;
}) => {
  console.log("Tab changed:", { prevIndex, nextIndex, stepId });
};

<FormWizard onTabChange={handleTabChange}>{/* ... */}</FormWizard>;

See Props for full callback signatures and related schema data props.