Building Wizard UI with Stepper

Here, we talk about the Stepper component.

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👇

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.

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

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.

      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.

      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.

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