PROCESIO
OverviewPlatform ActionsIntegrations & DemosCustom ActionsDeveloperโ€™s Guide

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 NameDescriptionTypeDefaultNotes
activetabindexIndex of the currently active tab (0-based) โ€” set programmatically to switch tabsnumberโ€”โ€”
visibleShow or hide the entire tabs containerbooleantrueโ€”
nameUnique element namestringโ€”โ€”
idUnique element IDstringโ€”โ€”

Individual Tab:

API NameDescriptionTypeDefaultNotes
labelThe tab's header label textstringโ€”โ€”
tooltipHelp text shown alongside the tab labelstringโ€”โ€”
visibleShow or hide this individual tabbooleantrueโ€”
nameUnique tab namestringโ€”โ€”
idUnique tab IDstringโ€”โ€”

For support, please join our Discord community for further assistance and support.

On this page