Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
70
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Headless Stepper

The ngs-headless-stepper component provides step state, validation, progress, and navigation methods without rendering a fixed stepper header. Use it when a product workflow needs a custom visual layout while still sharing NgStarter step behavior.

Use the visual Stepper when the default wizard UI fits. Use Headless Stepper for custom onboarding, checkout, setup, and form flows with app-specific progress indicators, headers, or responsive layouts.

The NgStarter Angular Headless Stepper component gives custom workflows a shared step model without prescribing the visible stepper UI. Use ngs-headless-stepper with ngs-headless-step when the app needs its own header, progress indicator, navigation controls, or layout.

Basic Headless Stepper

Use a headless stepper when you want to build a custom step header and progress display while relying on NgStarter for selected step state and movement methods.

Step 1 of 3

Workspace

Choose how the new workspace should be organized.

Workspace details

Pick a workspace name, region, and owner. This example keeps the content simple while the stepper owns the active step state.

Linear Headless Stepper

Add linear and connect each step to stepControl when a custom form flow must block progress until the active step is valid.

Linear setup

Step 1 of 3

33%

The next button becomes available when this form group is valid.