Stepper

The ngs-stepper component is a ready-made visual wizard for related steps in one process. Use it for onboarding, checkout, setup, import flows, and multi-step forms where users need to see the current step, move forward and back, and optionally validate each step before continuing.

The NgStarter Angular Stepper component lets you render a ready-made visual wizard for several connected steps in one process. Use ngs-stepper with ngs-step when users must move through related steps and see their current progress. It includes examples for Basic Stepper, Stepper Vertical, Stepper Header Position, and Stepper That Displays Errors In The Steps.

Basic Stepper

Use a basic stepper when a workflow has several connected steps and each step owns its own content. Add ngsStepperNext and ngsStepperPrevious to NgStarter buttons for normal wizard navigation.

Stepper Vertical

Use the vertical orientation when step labels need more room or the flow sits inside a narrow page, drawer, or mobile layout.

Fill out your name

Fill out your address

Done

Stepper Header Position

Move the header to the bottom when the step content should stay visually first and the step navigation acts like a footer.

Stepper That Displays Errors In The Steps

Connect steps to form controls with stepControl when a linear flow must block progress until the current step is valid. Step errors help users return to the part of the process that needs attention.

Stepper Responsive

Switch between horizontal and vertical orientation when the same process must work on both wide dashboards and smaller screens.

Make your screen larger to see a horizontal stepper

Fill out your name

Fill out your address

Fill out your phone number

Done

Stepper Label Bottom Position

Put labels below the step icons when horizontal space is tight or the labels should align as captions under each step marker.