# Building Wizard UI with Stepper

{% hint style="success" %}
Here, we talk about the [Stepper](/reference/working-with-components/stepper.md) 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="/files/jCDGc0j4ItEcyiqoTVG7" 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="/files/8uQb7xlDNlYjxOooC1Ub" 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/how-tos/components-recipes/building-wizard-ui-with-stepper.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.