Multi-step flows

The problem

A 30-field form is overwhelming, but a wizard that hides how many steps are left, or loses answers on Back, is worse. People abandon flows when they can't tell how close they are to done.

When to use it

Use it for

Tasks with distinct phases: onboarding, leave requests with documents, checkout.
Later steps depend on earlier answers.

Not for

Short forms that fit on one screen: splitting them adds clicks.
Settings people edit in any order: use tabs or sections.

Anatomy

StepperNamed steps with status: complete, current, upcoming or error.
ProgressProgressSteps for “Step 2 of 5” where names don't fit, like on phones.
Step contentOne topic per step, with its own heading.
NavigationBack and Continue at the bottom; the final button names the outcome: “Submit request”.

How to build it

Group fields into three to six steps with short names.
Show the Stepper above the content; use ProgressSteps on narrow screens.
Validate each step on Continue, and mark a step as error if it needs attention.
Keep all answers in one state object so Back never loses anything.
Move focus to the new step's heading after each change.
End with a review step before anything is submitted.

app.tsx

import { Button, Stepper } from "@nexera-ui/react";

const STEPS = [
  { label: "Dates" },
  { label: "Approver" },
  { label: "Documents" },
  { label: "Review" },
];

<Stepper aria-label="Leave request" steps={STEPS} current={step} />
<StepContent step={step} values={values} onChange={setValues} />
<div className="flex justify-between">
  <Button variant="secondary" isDisabled={step === 1} onPress={() => setStep(step - 1)}>
    Back
  </Button>
  <Button onPress={() => setStep(step + 1)}>
    {step === STEPS.length ? "Submit request" : "Continue"}
  </Button>
</div>

Accessibility

The current step has aria-current="step"; completed and error steps say so in text.
ProgressSteps can announce changes, so screen reader users hear “Step 3 of 4”.
Focus moves to the new step's heading, not to the top of the page.

Do and don't

DoName every step and show how many are left.

Don'tShow “Next” with no idea how far there is to go.

DoKeep answers when going back.

Don'tClear later steps whenever an earlier one changes.

DoName the final button after the outcome: “Submit request”.

Don'tEnd with a generic “Finish”.