Add the Native Stepper Indicator Pro element to your Bubble mobile page.
1. Set Step count to the number of steps in your process.
Example: 4

2. Set Current step to the active step number.
Step numbers start from 1.

3. Add step labels in the Step labels field using | to separate each label.
Example: Account|Details|Review|Done

4.Add optional subtitles in the Step subtitles field using |.
Example: Create profile|Add info|Confirm details|Finished

5.Choose a Variant:
Horizontal dots for onboarding/page indicators
Numbered steps for forms and checkout flows
Progress connector for a stronger progress-bar style
Vertical timeline for process tracking or activity-style steps

6. Turn Clickable steps on if users should be able to tap a step.

7. Turn Require completed step to advance on if users should not move forward until previous steps are completed.

8. Use Completed through to tell the plugin which step has been completed.
Example: if step 2 is completed, set Completed through to 2.

9. Use Error step to mark a specific step as failed or needing attention.
Use 0 when there is no error.

10. Customize the visual style using the color and layout fields.

11. Workflow Actions
Use these actions to control the stepper from Bubble workflows:
Set step - Moves the stepper to a specific step.
Next step - Moves to the next allowed step.
Previous step - Moves back one step.
Reset steps - Returns the stepper to step 1 and clears completion/error state.
Set completed through - Sets the last completed step.
Mark step completed - Marks a specific step as completed.
Mark step error - Marks a specific step as having an error.
Clear error - Removes the current error step.
Complete all steps - Marks the full stepper as complete and moves to the final step.

12. Published States
You can use these states in Bubble workflows, conditions, and text elements:
current_step - The active step number.
selected_step - The last step tapped or requested.
current_step_label - The label of the active step.
selected_step_label - The label of the selected step.
completed_through - The last completed step number.
error_step - The current error step.
percent - Progress percentage from first to final step.
is_complete - Yes when the stepper reaches the final step with no error.
can_go_next - Yes when the stepper is allowed to move forward.
can_go_previous - Yes when the stepper can move backward.
blocked_step - The step that was blocked by completion rules.
last_error_message - Validation or runtime error message.

13. Events
You can trigger workflows when these events occur:
step changed - Fires when the current step changes.
step selected - Fires when a user taps/selects a step.
step blocked- Fires when a user or workflow tries to move to a step that is not allowed.
completed - Fires when the current step reaches the final step and there is no error.
error occurred - Fires when the plugin detects an invalid step configuration.

*Step Locking Example*
If your form has 4 steps and Require completed step to advance is enabled:
Completed through = 0 means the user can only be on step 1.
Completed through = 1 means the user can move to step 2.
Completed through = 2 means the user can move to step 3.
Completed through = 3 means the user can move to step 4.
If the user taps a step beyond the allowed step, the plugin does not move forward. Instead, it publishes blocked_step and triggers the step blocked event.