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 In Dialog, Stepper Vertical, Stepper Header Position, Stepper Without Header Border, 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 In Dialog

Put a stepper inside Dialog when a temporary modal workflow needs several guided steps before returning a result to the opener.

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 Without Header Border

Hide the header separator when the stepper is placed inside a surface that already provides its own boundary or when the header is used as a bottom navigation area.

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