StepperForm

StepperForm lets you build linear flows — onboarding, plan upgrades, complex configuration — without recreating step-tracking logic. It composes WizardSteps for the visual indicator and exposes per-step async validation through step-level validate or form-level validateStep.

#Default usage

<StepperForm
  steps={[
    { id: "profile", title: "Profile" },
    { id: "team", title: "Team" },
    { id: "review", title: "Review" }
  ]}
>
  <StepperFormStep id="profile">Profile fields</StepperFormStep>
  <StepperFormStep id="team">Team fields</StepperFormStep>
  <StepperFormStep id="review">Review</StepperFormStep>
</StepperForm>

#Import

import {
  StepperForm,
  StepperFormActions,
  StepperFormStep,
} from "@froggdesign/enter-ui-react";

#Import

import {
  StepperForm,
  StepperFormStep,
  StepperFormActions,
} from "@froggdesign/enter-ui-react";

#Controlled

const [step, setStep] = useState(0);

<StepperForm
  currentStep={step}
  onStepChange={setStep}
  loading={creating}
  steps={[
    {
      id: "profile",
      title: "Profile",
      validate: async () => profileForm.trigger(),
    },
    { id: "team", title: "Team" },
    { id: "review", title: "Review" },
  ]}
  onSubmit={create}
>
  …
</StepperForm>

#Patterns

Set hideActions and render <StepperFormActions /> yourself when you need to inject extra controls (for example a Save draft button). orientation="vertical" places the indicator in a fixed left column for long flows.

#Accessibility

The step indicator marks the current step with aria-current="step" and disables future steps via WizardSteps semantics. The next/submit button announces aria-busy while loading. Keyboard: Tab / Shift+Tab move focus through fields normally; Enter on the next/submit button advances; the back button is disabled on the first step.

#API

• steps, currentStep, defaultStep, onStepChange, onSubmit, validateStep, loading, disabled, orientation, hideActions, backLabel, nextLabel, submitLabel.
• <StepperFormStep id /> matches a step's id and hides inactive panels.
• <StepperFormActions /> exposes the same buttons rendered by default.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.