Skip to content
Sign in

Steppers for React and Tailwind

A stepper turns a long task into a few small ones and shows how far there is to go. It should make the current step obvious and let people go back without losing anything. Check how it fits on a phone, where horizontal steps run out of room. Install one as code you own and connect it to your form.

Animated Stepper
Animated Stepper

About steppers

Steppers show progress through a task with several stages: numbered steps in a row or column, the current one highlighted and finished ones ticked. They lead sign ups, checkouts, onboarding and setup wizards, and some double as navigation between steps.

Show only a handful of steps with short names, let people go back without losing what they entered, and validate each step before moving on. On phones, collapse the row into Step 2 of 4 with a bar, since a long row of labels won't fit.

Frequently asked questions

Keep the current step and all answers in one state or form library, render the fields for the current step, validate them on Next and submit everything at the end.

A row or column of numbered steps showing which are done, which is current and which are ahead, used to guide people through a process.

Let them go back to any finished step to review or change answers. Jumping ahead to steps they haven't reached usually leaves information missing.

Store answers in local storage or on the server after each step, so a refresh or a return visit picks up where people left off.

Replace the full row with a compact Step 2 of 4 label and a progress bar, and keep the step name visible.

Mark it as a list, set aria-current on the current step, give finished steps text such as completed and move focus to the new step's heading on change.

As few as possible, often three to five. Group related fields so each step feels like one decision, and move optional questions to the end.

Explore more