Step Index ($s)

Tracks the current step index for reactions and manipulations.

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 .

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.

Have any questions? Contact us here.

---

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

index.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>

Webflow Example