# Building Wizard UI with Stepper

{% hint style="success" %}
Here, we talk about the [Stepper](https://docs.uibakery.io/reference/working-with-components/stepper) component.
{% endhint %}

In this article, we'll focus on how you can utilize the Stepper component to build wizard UI. But first let us explain the difference between the *Steps* and *Stepper* components since they both serve a similar purpose but with some slight differences.

The **Stepper** component has a clear and set structure:

* Header with steps
* Body (you can add other components to it)
* Footer with the *Prev/Next* buttons

The **Steps** component, on the other hand, only displays the literal steps. It would be a better choice if you want to build your own custom Stepper component, define its structure yourself, and add more customization.\
But if you need a component with minimal setup, built-in logic and validation, and you don't need that much customization, the **Stepper** component will be just fine.

***

Now, let's dive into the actual flow - we'll be building an onboarding wizard for a virtual pet app. We've already added a Stepper component consisting of 4 steps and added content to each step - *Text* and *Select* components. Also, for each step's *Select* component, the **Required field** checkbox is selected.

Let's proceed to configuring component logic:point\_down:

1. Firstly, deselect the *Allow step selection* setting of the Stepper component.
2. Next, configure how users will proceed through the steps. \
   You can do this in two ways: *Disable the Next button* (A) or *Control stepper manually* (B).

**Option A.**

Copy and paste the following code into the **Disabled** field in the *Next button* section in the right side panel.

```javascript
const activeStepKey = {{Object.keys(ui.stepper.children)}};
const currIndex = {{ui.stepper.selectedStepIndex}};
return {{!ui.stepper.children[activeStepKey[currIndex]].valid}}
```

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FZZ3zvIiMfo85cCawfb67%2FCleanShot%202025-08-12%20at%2013.27.59%402x-min.png?alt=media&#x26;token=a84ba933-c6e4-4bb8-9694-27c33c7b103a" alt=""><figcaption></figcaption></figure>

Alternatively, you can paste the code into the **Show next button** field in the same section, but, in this case, you need to remove the *exclamation mark* in the last line (`return {{`**`!`**`ui.stepper.children...`).

The *Next* button will be either disabled or not visible, and users won't be able to proceed to the next step if they haven't selected any value.

**Option B.**

1. First, select the *Control stepper manually* checkbox in the Stepper's settings in the *Appearance* section.
2. Create **two actions** of the JavaScript Code type and specify the following code:
   1. *onNext* action - checks if the Select in the current step is valid and if there are more steps.<br>

      ```javascript
      const index = {{data.selectedStepIndex}};
      const selects = {{ui.stepper.children}};
      const keys = Object.keys(selects);
      if(selects[keys[index]].valid && (index + 1) < keys.length) {
        {{ui.stepper.selectStep(index + 1)}};
      } else {
        {{selects[keys[index]].validate()}};
      }
      ```
   2. *onPrev* action - checks if users can go back to the previous step.<br>

      ```javascript
      const index = {{data.selectedStepIndex}};
      if (index > 0) {
        {{ui.stepper.selectStep(index - 1)}};
      }
      ```
3. Now, assign these actions to the Stepper component's **On Next** and **On Prev** triggers.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Fj6wW1t7R6nYBFHOPqtjo%2FCleanShot%202025-07-03%20at%2016.17.34%402x-min.png?alt=media&#x26;token=dd4f3c5d-0f48-4d57-b1f0-f6007a864122" alt=""><figcaption></figcaption></figure>

4. Finally, deselect the *Linear* checkbox in the Stepper's settings in the *Appearance* section.

That's it! If users don't select a value and click Next, the Select field will be highlighted in red and they won't be able to progress.

{% @arcade/embed flowId="eyUv6KKVY56Muom1J1d5" url="<https://app.arcade.software/share/eyUv6KKVY56Muom1J1d5>" %}