Tabs
The Tabs element organizes form content into multiple tabbed panels, allowing users to switch between different views or sections of a form withoutโฆ
The Tabs element organizes form content into multiple tabbed panels, allowing users to switch between different views or sections of a form without leaving the page. It is ideal for forms that contain distinct, non-sequential categories of information โ such as Summary, Details, History, and Attachments โ that users may need to access in any order.
Unlike the Stepper (which enforces sequential progression), Tabs give users free navigation between panels. The activetabindex attribute makes it possible to programmatically switch the active tab from event logic โ for example, automatically navigating to an error tab if a validation issue is detected, or switching to a Results tab after a process completes. Each tab's visibility can also be toggled individually.
Key Use Cases
โขย ย ย ย ย ย ย Record detail forms with Summary / Activity / Documents / Settings tabs
โขย ย ย ย ย ย ย Dashboard-style forms that present different data views in separate tabs
โขย ย ย ย ย ย ย Programmatically switching to a specific tab after a process runs (e.g., 'Results' tab)
โขย ย ย ย ย ย ย Conditionally hiding tabs that are not relevant to the current user's role
โขย ย ย ย ย ย ย Organizing approval forms with separate tabs for Request Details and Review Decision
Runtime API โ Attributes in Procesio Forms
Both the Tabs container and each Tab have their own API attributes, all accessible at runtime via the data model.
Tabs Container:
| API Name | Description | Type | Default | Notes |
|---|---|---|---|---|
| activetabindex | Index of the currently active tab (0-based) โ set programmatically to switch tabs | number | โ | โ |
| visible | Show or hide the entire tabs container | boolean | true | โ |
| name | Unique element name | string | โ | โ |
| id | Unique element ID | string | โ | โ |
Individual Tab:
| API Name | Description | Type | Default | Notes |
|---|---|---|---|---|
| label | The tab's header label text | string | โ | โ |
| tooltip | Help text shown alongside the tab label | string | โ | โ |
| visible | Show or hide this individual tab | boolean | true | โ |
| name | Unique tab name | string | โ | โ |
| id | Unique tab ID | string | โ | โ |
For support, please join our Discord community for further assistance and support.
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โฆ
Side Panel
The Side Panel element creates a collapsible overlay drawer that slides in from the side of the form when triggered. It is a space-efficient patternโฆ

