Skip to main content


Tabs are used within applications to group components into separate tabs.

Set tabs and default selection

  1. Drag a Tabs component from the Components panel

  2. In the Properties panel, rename the tab names

  3. Click Add a Tab to create and additional tab

  4. Enter the name of the Default Tab to have a specific table opened on application load

    Drag a tabs component on to the canvas and adjust its properties to rename the tabs

Reorder tabs

  1. Click and hold the tab's handle and drag to reorder

    Drag and drop the tabs in the properties pane to reorder them

Tabs Properties

Component Properties

Default TabSet the default tab to open on
Scroll ContentsEnable scrollability within the tabs component for larger tabs
VisibleSet true to show and false to hide. Set dynamically using JavaScript with {{}}

Settable Properties

Property Via Form / Via RunJSTypeExample Value
Selected Tab / selectedTabstring"Tab Name"

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Tabs component, and dot referencing the property. For a Tabs component named Tabs1:

Tabs1.selectedTabReturns the name of the selected tab as a string
Tabs1.tabsReturns an array of all the tabs
Tabs1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)


The following events are triggered by user interactions with Tabs components. Use event handlers to trigger actions in response to user events.

onTabSelectedRun an API every time a tab is selected