--- meta: title: Vertical Stepper description: Vertical steppers display a sequence of steps in a vertical layout, ideal for showing detailed multi-step processes with individual step descriptions. layout: component --- ```html:preview ``` ## Examples ### Basic Vertical Stepper Vertical steppers are composed of individual step items arranged vertically. Use the `first`, `active`, and `last` attributes to control appearance and connection lines. ```html:preview ``` ### Active State Use the `active` attribute to highlight the current step in the process. The active step is visually distinguished from completed and upcoming steps. ```html:preview ``` ### With Custom Icons Use the `icon` slot to add custom icons or indicators for each step. ```html:preview ``` ### Completed Steps with Icons Show completed steps with check marks or success icons. ```html:preview ``` ### Order Processing Workflow A practical example showing an order fulfillment process with different step states. ```html:preview ``` ### Without First and Last Markers Create continuous step lists by omitting the `first` and `last` attributes when steps are part of a larger scrollable list. ```html:preview ``` ### Installation Progress Show detailed installation or setup progress with descriptive text for each phase. ```html:preview ``` ### Project Onboarding A multi-step onboarding flow with clear descriptions for each phase. ```html:preview ``` ### Error State Show error or warning states in your stepper workflow. ```html:preview ``` ### Dynamic Vertical Stepper Update vertical stepper states dynamically based on user actions. ```html:preview

Complete Current Step Reset ``` ### Compact Vertical Stepper Create a more compact layout by adjusting spacing with CSS. ```html:preview
``` ## Integration Patterns ### Combined with Horizontal Stepper Combine vertical and horizontal steppers for complex workflows where the horizontal stepper shows high-level progress and vertical steppers show detailed sub-steps. ```html:preview

``` ### With Action Buttons Add interactive elements next to each step for expanded functionality. ```html:preview
Edit
Run
Deploy
``` ### Nested Steps Show hierarchical relationships by nesting vertical steppers or indenting them. ```html:preview
```