---
description: Adding step for single step, steps for multistep or quiz functionality.
---

# Step Container

## Setup

**Attribute:** `sf-step = stepName`

**Where:** any `div` element that you want as a _**step** (is required for single-step forms too)._

**Description:** Defines the form's steps and assigns each step a unique name. Allows for navigation between steps.



**HTML Example**

<pre class="language-html" data-title="index.html"><code class="lang-html">&#x3C;div sf="myForm">
  &#x3C;form>
    &#x3C;!-- Step 1 -->
<strong>    &#x3C;div sf-step="step1">
</strong>      &#x3C;!-- Step 1 content goes here -->
    &#x3C;/div>

    &#x3C;!-- ## OPTIONAL ## -->
    &#x3C;!-- Step 2 -->
    &#x3C;div sf-step="step2">
      &#x3C;!-- Step 2 content goes here -->
    &#x3C;/div>
  &#x3C;/form>
&#x3C;/div>
</code></pre>



**Webflow Example**

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FuIo8PgH71ATiEZbxPCsD%2FCleanShot%202024-07-15%20at%2014.12.00%402x.png?alt=media&#x26;token=e4dc6059-3a67-4de5-8cfd-fb9cbeacf211" alt=""><figcaption></figcaption></figure>



{% embed url="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2Fa78ZEdkF9n7vKigzQM28%2FStepsSelector.mp4?alt=media&token=77ea18eb-3f67-47ce-a677-acc12bf45876" %}
VIDEO: Adding names to steps is highly suggested. This way Superform and you can navigate to each step easier.
{% endembed %}



{% hint style="info" %}
**Dos and Dont's**

***



Step names are used to control navigation and can be referenced programmatically or via navigation attributes, enhancing form flow and user experience.&#x20;

\
<mark style="color:red;">**Avoid using only numbers in step names or start with a number!**</mark>



**Do** ✅

* step-1
* step2
* step-intro
* last



**Don't** ❌

* 4
* 3a



***

Use names semantically so other developers can understand your way of thinking.
{% endhint %}

