1. Add the Step Indicator element to your mobile page.
2. Set the steps.
Use Labels to provide a Bubble list of step names, or use Labels text with comma, pipe, or line-separated labels.

Example:
Account, Profile, Review, Payment, Done

3. Set the Current step.
Current step is 1-based. This means the first step is 1, the second step is 2, and so on.

4. Choose the Direction.
Use Horizontal for wizard-style progress at the top of a page.
Use Vertical for timelines, onboarding checklists, or taller step layouts.

5. Configure interaction.
Turn on Allow step press if users should be able to tap a step.
When a step is tapped, the Step pressed event runs and the pressed step states are updated.

6. Style the indicator.
Customize finished, current, and unfinished colors separately. You can also control circle size, current circle size, separator width, border width, text colors, label colors, label size, spacing, and padding.

7. Choose indicator content.
   Use numbers for standard step counters.
   Use checkmarks to show completed steps.
   Use dots for a minimal progress style.
   Use none if you only want styled circles.

8. Use workflow actions.
   Use Set current step to jump to a specific step.
   Use Next step to move forward.
   Use Previous step to move backward.
   Use Reset to return to the first step or a selected step.

9. Use states in your app logic.
   Current step gives the active step number.
   Current label gives the active step label.
  Progress ratio gives a value from 0 to 1.
  Is first step and Is last step are useful for hiding or showing Back, Next, and Finish buttons.

10. Use the Completed event.
     The Completed event runs when the current step reaches the final step. This is useful for finishing onboarding, submitting a flow, or showing a success screen.