Steppers for Power Apps

Steppers show where a user is in a sequence: which step of a wizard, which stage of an approval, how far an upload has got. This family has two steppers with Next and Back buttons, a checklist with a progress bar and task counter, a vertical timeline for order or delivery tracking, and a progress bar that a Timer animates. Reach for one when a process has a fixed order of stages and users need to see what is done and what comes next. Every variant keeps its position in one global variable, so the rest of your screen can react to it.

Pick a variant

Component	Plan	What it is for	Settings you can change
Horizontal Stepper	Paid	Registration and onboarding wizards with a content area per step	Steps, Next Button Text, Back Button Text, Complete Button Text
Vertical Stepper	Paid	Approval workflows and other sequential processes	Title, Steps, Next Button Text, Back Button Text, Complete Button Text
Checklist Progress	Paid	Onboarding checklists and task completion tracking	Title, Tasks, Complete Button Text, Undo Button Text, Reset Button Text
Timeline Progress	Paid	Order tracking and delivery status	Title, Subtitle, Steps, Next Button Text, Undo Button Text, Reset Button Text
Upload Progress	Paid	A simulated upload or processing bar driven by a Timer	Title, Total Amount, Unit, Timer Interval (ms), Increment per Tick (%), Start Button Text, Pause Button Text, Reset Button Text

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Open the category in the library: Steppers.

To copy a variant into Power Apps Studio, follow Getting Started.

After you paste

Each variant stores its position in one global variable: varHStep (Horizontal Stepper), varVStep (Vertical Stepper), varTimeStep (Timeline Progress), varCheckCount (Checklist Progress), and varAnimProg with varAnimRunning (Upload Progress). Nothing in the pasted YAML gives that variable a starting value, so it is blank until the first click and the display is wrong until then: the Horizontal Stepper's content labels fall through to the last branch of their If() and no step circle is highlighted. Put this in the screen's OnVisible property, using the variable of the variant you pasted (Set(varCheckCount, 0) for the checklist, Set(varTimeStep, 1) for the timeline):

Set(varHStep, 1)

The Horizontal Stepper's conStepContent holds only a title, a description and a hint per step. To show your own controls for one step, put this in the Visible property of each container you add, changing the number per step:

varHStep = 2

btnHNext moves one past the last step to reveal lblHComplete, so the final click is the moment to save. Extend the OnSelect property of btnHNext (the Vertical Stepper's btnVNext and varVStep work the same way):

Set(varHStep, Min(5, varHStep + 1));
If(varHStep = 5, Patch(Requests, Defaults(Requests), {Status: "Submitted"}))

Good to know

The number of steps is baked into the formulas at copy time. With four steps, Next stops at Min(5, ...), lblHComplete shows when varHStep is greater than 4, and the checklist counter in lblCheckPercent reads "/ 5 tasks". Add or remove steps and tasks in the Settings tab before you copy; doing it in Studio means editing every If() and Min() by hand.
Steps are fixed controls, not a gallery: on the Horizontal Stepper, conStep1Circle, lblStep1Label and conLine1 for the first step, then the same pattern for each one. Labels, titles and descriptions are plain text in each label's Text property, so you can retype them in Studio without touching the logic.
The two steppers use Back and Next; btnHBack and btnVBack stop at 1. Timeline Progress stops at its last step and btnTimeNext then reads "Done", with btnTimeUndo and btnTimeReset to go back. Checklist Progress counts up with btnCheckComplete, down with btnCheckUndo, and btnCheckReset sets varCheckCount to 0.
Upload Progress is a simulation, not a real upload. A hidden Timer named AnimTimer has Start set to varAnimRunning, adds the "Increment per Tick (%)" to varAnimProg every "Timer Interval (ms)" and stops at 100; lblAnimBytes multiplies the percentage by Total Amount divided by 100. Timers do not tick on the Studio edit surface, so press play to see it move.
All five variants are paid components: Components, Ultra, Team or Lifetime. They generate Classic controls only, so the YAML tab has no Modern option.

Open the category in the library: Steppers. Related guides: Form Builder for the multi-step form a stepper usually sits above, and Input Fields for the controls that go inside each step.