Skip to main content

Tabs

This page explains how the Tabs widget can be used to group related content and enable users to switch between different sets of information within a single container.

Using the Tabs Widget

Create multi-step form

Custom navigation schemes can be created by modifying the properties of a Tab widget. For instance, you can use the Default tabs and storeValue to create a multi-step form.


Example: suppose you want to create a multi-step form using Tabs Widget.

  1. Drop a Tab Widget and rename the tabs to Basic Info, and Personal Info.

  2. On the Basic Info tab add a Button widget to allow users to move to the next tab, and set its onClick event to:

{{storeValue('defaulttab', 'Personal Info');}}
  1. Similarly, on the Personal Info tab, add a new button widget that allows users to go back to the previous tab, and set its onClick event to:
{{storeValue('defaulttab', 'Basic Info');}}

You can use the storeValue action for both previous and next buttons, and set the key for the stored value to be the same as the name of the Tabs.

  1. In the Default Tab property of the Tabs widget, add the following code:
{{appsmith.store.defaulttab}}
Display images on table row selection
Multi-step form using Tabs

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget properties

These properties allow you to edit the widget. All of these properties are present in the property pane of the widget.

PropertyData typeDescription
TabsStringThis property lets you add and remove tabs from the widget. Tabs are uniquely identified by their tab names. You can also change the visibility settings for each tab from here
Default TabStringThis property selects the tab which matches the corresponding name, making it the default tab that is displayed when the widget is loaded.
Show TabsBooleanThis property allows you to hide or show the tabs in the tab widget. It can be used to create the illusion of dynamically changing UI.
VisibleBooleanThis property controls the widget's visibility on the page. When turned off, the widget isn't visible when the app is published.
Animate LoadingBooleanThis property allows you to control a widget’s animation on the page load.
Scroll ContentsBooleanThis property enables scrolling within the contents of each tab. If the content of a tab is larger than the available space, users can scroll to view it.
HeightStringIt configures how a widget’s height reacts to content changes. It has three possible configurations:
Fixed: The height of the widget remains as set using drag and resize.
Auto Height: The height of the widget reacts to content changes.
Auto Height with limits: Same as Auto height, with a configurable option to set the minimum and maximum number of rows that can be occupied by the widget.

Reference properties

These properties can be referenced in other widgets, queries, or JS functions using the dot operator. For instance, you can use Tabs1.isVisible to get the visibility status.

Reference PropertyData typeDescription
isVisibleBooleanThis property indicates whether the widget is visible or not.
selectedTabStringContains the name of the tab currently selected

Style properties

Style properties allow you to change the look and feel of the widget. All of these properties are present in the property pane of the widget.

PropertyData typeDescription
Accent ColorStringSets the widget's accent color, which appears as the fill color for the checkbox when checked. Accepts CSS color values.
Background ColorStringControls background color of container.
Border ColorStringAllows you to change the border color of the text widget.
Border WidthNumberDefines the thickness of the border.
Border RadiusStringAllows you to define curved corners.
Box ShadowStringAllows you to choose from the available shadow styles.

Events

When the event is triggered, these event handlers can run queries, JS code, or other supported actions

EventsDescription
onTabSelectedSets the action to be run when the user selects a tab.