# Step Index ($s)

The special `$s` variable is used to access the step count within the form. This can be useful for tracking user's step journey through a multi-step form and for implementing conditional logic and styling based on the current step.

* **Step Tracking**: Monitor the current step number in a multi-step form.
* **Conditional Navigation**: Navigate to different steps based on the current step number.
* **Step-Based Calculations**: Perform actions based on the step count and integrate [reactivity](https://deltaclan.gitbook.io/superform/reactivity "mention").

{% hint style="info" %}
**Tip**\
Steps are stored inside an array, and every item in an array starts at `0`, meaning the first step you interact with is indexed as step `0`. Keep this in mind as you navigate or configure your multi-step forms, that basically the first step you see is `0`. <br>

Have any questions? [Contact us here](https://discord.gg/pjy8U7H6yx).

{% endhint %}

***

## Examples

Since Superform is built in vanilla JavaScript, you will see both HTML and Webflow examples, it's practically the same — works with Webflow's Custom Element and elements inside Code Embed.

### 1. Step Tabs

**HTML Example**

{% code title="index.html" %}

```html
<!-- Step Tabs -->
<div class="tabs">
  <div sf-react="class($s >= 0, is-active)">Step 1</div>
  <div sf-react="class($s > 0, is-active)">Step 2</div>
  <div sf-react="class($s > 1, is-active)">Step 3</div>
</div>

<!-- Form Steps -->
<div sf-step="step-1">Step 1 Content</div>
<div sf-step="step-2">Step 2 Content</div>
<div sf-step="step-3">Step 3 Content</div>
```

{% endcode %}

**Webflow Example**

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F0aVhGDalW5czFuEGQzvq%2F%24s_Simple_Example_reactive_Final.mp4?alt=media&token=2123b03d-a8d3-4884-a01f-67367d824988>" %}