# Steps

## Overview

A series of steps. The component supports *manual* (for a static list) and *dynamic* options configuration. You can set up linear steps execution or allow step selection when required. The component supports both vertical and horizontal orientation and displays step completion.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FVJWeA0itjUNOmnFyQbNj%2FCleanShot%202025-08-22%20at%2012.56.40%402x-min.png?alt=media&#x26;token=169af780-d013-46d9-9ad9-de510709bb18" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="175.62109375">Name</th><th width="103.890625">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>selectedStepIndex</code></td><td><code>number</code></td><td>Selected step index</td></tr><tr><td><code>selectedStep</code></td><td><code>step</code></td><td>Selected step object</td></tr><tr><td><code>steps</code></td><td><code>step[]</code></td><td>Steps array</td></tr><tr><td><code>completed</code></td><td><code>boolean</code></td><td>Indicates whether the component is completed</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="115.95703125">Name</th><th width="142.55859375">Parameters</th><th width="101.2578125">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>prev</code></td><td>–</td><td><code>void</code></td><td>Select previous step</td></tr><tr><td><code>next</code></td><td>–</td><td><code>void</code></td><td>Select next step</td></tr><tr><td><code>reset</code></td><td>–</td><td><code>void</code></td><td>Reset stepper</td></tr><tr><td><code>selectStep</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Select step by index</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="149.953125">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr><tr><td><strong>On Step Change</strong></td><td>Triggered when the selected step changes</td></tr></tbody></table>