Stepper Horizontal

Displays progress through a sequential multi-step process with a horizontal step indicator.

Multi-step form

Drive active-step-index from parent state. Previous steps are styled as completed; future steps are upcoming.

Step 2: Details

Fill in your personal details including your name and contact information.

Code

The stepper is a display-only component. Render it with the desired active-step-index and update from your own navigation logic.

<diwa-stepper-horizontal active-step-index="1">
  <diwa-stepper-horizontal-item label="Account"></diwa-stepper-horizontal-item>
  <diwa-stepper-horizontal-item label="Details"></diwa-stepper-horizontal-item>
  <diwa-stepper-horizontal-item label="Review"></diwa-stepper-horizontal-item>
  <diwa-stepper-horizontal-item label="Confirm"></diwa-stepper-horizontal-item>
</diwa-stepper-horizontal>