Stepper
The Stepper element breaks a long or complex form into a sequence of named steps, presenting one step at a time with Previous and Next navigationโฆ
The Stepper element breaks a long or complex form into a sequence of named steps, presenting one step at a time with Previous and Next navigation buttons. This dramatically reduces cognitive load for end users โ instead of scrolling through a wall of fields, they progress through a guided, step-by-step journey with clear progress indicators.
Each Step within the Stepper is a separate container with its own label, tooltip, and visibility. The Stepper's activestepindex attribute is fully controllable at runtime, meaning you can programmatically jump to a specific step โ for example, skipping to step 3 based on a selection made in step 1, or returning the user to a step with validation errors. The Next and Previous button labels are also customizable.
Key Use Cases
โขย ย ย ย ย ย ย Onboarding forms broken into Personal Info / Work Details / Documents / Review steps
โขย ย ย ย ย ย ย Multi-phase approval workflows where each step represents a reviewer's section
โขย ย ย ย ย ย ย Wizard-style request forms that guide users through configuration choices
โขย ย ย ย ย ย ย Programmatically advancing activestepindex from a process to skip irrelevant steps
โขย ย ย ย ย ย ย Conditionally hiding steps that are not applicable to the current user or context
Runtime API โ Attributes in Procesio Forms
Both the Stepper container and each Step have their own API attributes, all accessible at runtime via the data model.
Stepper Container:
| API Name | Description | Type | Default | Notes |
|---|---|---|---|---|
| nextbuttontext | Label shown on the Next navigation button | string | next | โ |
| previousbuttontext | Label shown on the Previous navigation button | string | previous | โ |
| activestepindex | The index of the currently active step (0-based) โ set programmatically to navigate | number | 0 | โ |
| visible | Show or hide the entire stepper | boolean | true | โ |
| name | Unique element name | string | โ | โ |
| id | Unique element ID | string | โ | โ |
Individual Step:
| API Name | Description | Type | Default | Notes |
|---|---|---|---|---|
| label | The step's title shown in the progress indicator | string | โ | โ |
| tooltip | Help text shown alongside the step label | string | โ | โ |
| visible | Show or hide this step | boolean | true | โ |
| name | Unique step name | string | โ | โ |
| id | Unique step ID | string | โ | โ |
For support, please join our Discord community for further assistance and support.
Columns
Each Column within the Columns container has its own label and visibility controls, giving you fine-grained layout control. The parent Columnsโฆ
Divider
The Divider element renders a horizontal rule โ a clean visual separator line โ between sections of a form. It is the simplest structural element inโฆ