Can I use Stepper V2 alongside a Stepped Container?

Yes. Place the Stepper V2 above or beside the Stepped Container, and show each stage's content only when {{ stepper1.activeStepId }} equals that stage's step key (replace stepper1 with your block's ID). Your Next and Back buttons call Move to next step and Move to previous step on the stepper, and the content follows. Don't put stage content in the Step body slot: its blocks render once for every step.

How do I stop the user moving on after an API call fails?

Stepper V2 has no error status and no validation event. Call your API from your own Next button. In the API call's success handler, call Move to next step. In its error handler, show an error notification and don't call the method — the user stays on the current step.

How do I control which steps users can click?

Turn on Allow click navigation under Content → Interactions to let users jump between steps by clicking them. To block a single step, open it and set its own Allow click navigation (under Interactions) to Don't allow. Click blocking only applies to clicks: Move to step and the other methods can still move to that step. There is no skip option; to let users bypass an optional step, call Move to step with the next step's key.

Stepper V2- UnifyApps

Stepper V2 (StepperV2) is the composable progress-track block. Like the original Stepper, it shows where the user is in a multi-stage flow and tracks one active step. Unlike it, every visual part of a step — indicator, separator, label, description — is a real block inside editable slots that you can restyle. Steps can hold sub-steps, and steps can come from a hand-authored list (Manual) or a data source (Mapped).

Differences from Stepper V1

Feature	Stepper V1	Stepper V2
Step visuals	Fixed design	Built from blocks in slots (Step track, Step body, Sub step track, Sub step body)
Sub-steps	Manual sub-steps (one level of nesting)	Sub-steps (one level of nesting) can also come from mapped data, and each step can use per-step icons and slots
Step source	Manual steps, or Mapped from a data source (set in Type)	Manual steps, or Mapped from a data source with step and sub-step mappings (set in Source)
Click navigation	Block-level	Block-level Allow click navigation, plus a per-step override

Step Statuses

You don't set a step's status. The stepper works it out from the active step: the active step is active, steps before it are completed, and steps after it are pending. A parent step is active while any of its sub-steps is active, completed only when all of them are completed, and pending otherwise. There are no error or skipped statuses.

Step Properties

Open a step from Content → Steps. Each step has these fields:

Field	Section	Description
Step key	Content	The step's unique identifier — letters, numbers and underscores only. Default step and Move to step point at this key.
Label	Content	The step's visible title.
Description	Content	Secondary text shown with the step.
Icon	Content	Shown by the step indicator when its display mode is set to icon.
Sub steps	Content	Nested steps shown under this step. Sub-steps can't hold their own sub-steps.
Icon color	Appearance	Color of this step's indicator icon. Overrides the status-based color.
Icon background color	Appearance	Fill behind this step's indicator. Overrides the status-based color.
Visibility	Appearance	Shows or hides this step. Hidden steps are removed from the track and skipped by navigation.
Allow click navigation (per step)	Interactions	Whether users can click this step. Only applies when the block-level Allow click navigation is on.

Block-Level Properties

Property	Default	Description
Source	Manual	Manual: you author the steps in Steps. Mapped: bind a Data source and use Step mappings (Id, Label, Description, Sub steps, Allow click navigation) and Step icon mappings to map fields. Once Sub steps is mapped, Sub step mappings and Sub step icon mappings appear.
Default step	First step	The step shown when the block loads. If the bound value changes later, the stepper moves to the new step.
Slots	—	Step track, Step body, Sub step track and Sub step body. Their blocks render once for every step: Step body is each step's label and description area, not a place for the stage's content.
Allow click navigation	Off	Set in Content → Interactions → Allow click navigation. Lets users jump between steps by clicking their indicators. Individual steps can still opt out.
Events	—	Set in Content → Interactions → Events. One event: On step change. It fires when a user clicks a step or a method moves the active step, not when the block lands on its default step.
Orientation	Horizontal	Set in Appearance. Vertical stacks steps top-to-bottom with sub-steps indented. Preferred for long labels or narrow layouts.

Methods and State

Name	Type	Description
Move to next step	method	Advances to the next visible step. Entering a step with sub-steps lands on its first sub-step.
Move to previous step	method	Goes back to the previous visible step.
Move to step	method	Jumps to the step whose key you pass in Step ID. An unknown key does nothing. A parent step's key goes to its first sub-step.
`{{ id.activeStepId }}`	string	Key of the active step.
`{{ id.currentStep }}`	object	Details of the active step (value, label, description, icon).

Call methods with the Trigger Component Method action. Methods ignore Allow click navigation, so they can move to a step that users can't click.

Validating Before Moving On

Stepper V2 has no built-in validation gate. Put your own Next button in the step body, check the step's fields in its click handler, and call Move to next step only when they are valid. If they aren't, show a notification and stay on the current step.

Example: On the Next button, add a Condition action that checks {{ formEmail.value !== "" && formName.value !== "" }}. In the True branch, call Move to next step. In the False branch, add a Show Notification action (error variant, "Please fill in all required fields").

Working with Sub-steps

Sub-steps are real stops — the user lands on them, while the parent step acts as a group header. Navigating to a parent step, by click, by Move to step or through Default step, always goes to its first sub-step. Vertically, sub-steps render indented under the parent. Horizontally, they render as a row beneath the parent step.

Tip: In a mapped stepper, map Sub steps to a nested array field in each row. Each entry in that array becomes a sub-step.

Setting Up a Multi-Stage Review Form

Define the steps: Keep Source on Manual and add three steps: Applicant Info (sub-steps: Personal Details, Contact Details), Documents (sub-steps: ID Upload, Proof of Address), and Review & Submit.
Set the layout: Set Orientation to vertical, since sub-steps read better vertically.
Add the step content: Put each stage's form fields outside the stepper, for example in a Stepped Container or one Stack per stage next to it. Show each stage only when {{ stepper1.activeStepId }} equals that stage's step key. Replace stepper1 with your Stepper V2's block ID. Don't use the Step body slot for this: its blocks render once for every step.
Wire navigation: Add Next and Back buttons. Next checks the current fields, then calls Move to next step. Back calls Move to previous step.
Submit: On the last step, add a Submit button that calls your API action. On success, show a success notification and navigate to a confirmation page.

Page	Relationship
Timeline, Events Timeline & Stepper	The original Stepper: fixed design
Step Separator	The connector line between steps inside a Stepper V2 track
Tabs & Stepped Container	Peer sections or stepped page content alongside a progress indicator

Stepper V2