Tabs Container
Add a tabbed navigation bar to your screen so users can switch between different views or sections. Supports 2 to 6 tabs with multiple visual styles, optional icons, notification badges, and smooth transitions. Great for organizing content on a single screen without navigating away.
Getting Started
Add the Tabs Container component to your screen. By default, it shows 3 tabs with an underline style. Each tab has a customizable label, optional icon, and optional badge. Use the On Tab Changed action to control what happens when users switch tabs -- for example, showing or hiding different sections of your screen.
Settings
Tab Count
Choose how many tabs to display: 2, 3 (default), 4, 5, or 6.
Default Active Tab
Set which tab is selected when the screen first loads. Choose None (no tab selected initially) or Tab 1 through Tab 6. Default is Tab 1.
On Tab Changed
An action that fires whenever a user switches tabs. Passes two values:
Tab Index -- The number of the newly selected tab (1, 2, 3, etc.)
Tab Label -- The text label of the selected tab
Use this to filter lists, show/hide content, or track which tab is active.
Magic Text Outputs (Form Values)
The component outputs 5 values available as Magic Text anywhere on the same screen:
Selected Tab Label -- The text label of the currently active tab
Selected Tab Index -- The number of the currently active tab (1-based)
Filter Value 1 -- The Filter Value 1 from the currently active tab
Filter Value 2 -- The Filter Value 2 from the currently active tab
Filter Value 3 -- The Filter Value 3 from the currently active tab
All 5 values update immediately when the user switches tabs.
Tab Bar Appearance
Tab Style
Choose the visual style for your tabs:
Text Only -- Just text, no visual indicator for the active tab
Underline (default) -- A colored line under the active tab
Pill -- A rounded pill-shaped background on the active tab
Filled -- A solid background fill on the active tab
Underline Options (Underline Style)
Underline Width -- Full Width (spans the entire tab) or Partial (60%) (default, a shorter accent line)
Underline Position -- Top or Bottom (default)
Underline Thickness -- Line thickness from 1 to 6 pixels (default is 3)
Pill Options (Pill Style)
Show Border -- Add a border to tabs: None (default), Inactive Tabs (only unselected tabs get a border), or All Tabs
Tab Spacing -- Gap between pill tabs (0 to 16, default is 4)
Border Radius -- Rounding of the pill shape (0 to 24, default is 8)
General Appearance
Animate Transition -- Smooth animation when switching tabs (default: on)
Scale Active Tab -- Slightly enlarge the active tab for emphasis (default: off). Available for Text Only, Pill, and Filled styles.
Show Divider -- Display a thin line at the bottom of the tab bar (default: on)
Tab Size -- Choose Same Size (default, all tabs are equal width) or Dynamic Width (tabs size to fit their content)
Horizontal Padding -- Left/right padding inside each tab (4 to 40, default is 16). Only applies to Dynamic Width.
Tab Vertical Padding -- Top/bottom padding inside each tab (0 to 24, default is 8)
Tab Bar Vertical Padding -- Padding above and below the entire tab row (0 to 24, default is 8)
Tab Alignment -- Align dynamic-width tabs to the Left (default), Center, or Right
Container Rounding -- Corner radius of the entire tab bar container (0 to 24, default is 0)
Individual Tab Settings (Tab 1 through Tab 6)
Each tab has its own settings section:
Label
The text displayed on the tab. Supports font styling (family, size, weight). Default labels are "Tab 1", "Tab 2", etc.
Icon
Show Icon -- Toggle an icon on this tab (default: off)
Icon -- Choose from the icon picker. Default icons vary by tab (home, search, settings, person, star, info).
Icon Position -- Place the icon to the Left of Text (default) or Right of Text
Badge
Add a notification badge to draw attention to a tab:
Enable Badge -- Toggle the badge indicator on or off (default: off)
Badge Value -- A number field (use Magic Text to bind to your data). The badge appears when the value is greater than 0. Numbers above 99 display as "99+".
Show Badge Value -- Toggle whether the number is visible on the badge. When off, the badge appears as a simple dot.
Disabled
Toggle a tab to its disabled state. Disabled tabs appear greyed out and cannot be tapped.
Filter Values
Each tab can carry up to 3 filter values that are output as Magic Text when the tab is selected:
Filter Value 1 -- A text value associated with this tab. Use it to drive list filters, visibility conditions, or any other Magic Text binding.
Filter Value 2 -- A second filter value for this tab.
Filter Value 3 -- A third filter value for this tab.
These values support Magic Text input, so you can bind them to database fields or type static values.
Tab Click Action
An action that fires when this specific tab is tapped. Use this for tab-specific behavior in addition to (or instead of) the On Tab Changed action.
Colors
Customize all the colors in the tab bar:
Tab Bar Background -- Background of the entire tab bar (default: #F5F5F5)
Active Tab Color -- Background/fill color of the active tab (default: #E0E0E0)
Active Text and Icon Color -- Color of text and icons on the active tab (uses your primary color by default)
Inactive Text and Icon Color -- Color of text and icons on unselected tabs (default: #999999)
Underline Color -- Color of the underline indicator (uses your primary color by default)
Divider Color -- Color of the divider line below the tab bar (default: #E0E0E0)
Badge Color -- Background color of notification badges (default: #FF3B30, red)
Badge Text Color -- Text color inside badges (default: white)
Disabled Text Color -- Color of disabled tab text and icons (default: #CCCCCC)
Actions
On Tab Changed -- Fires when the active tab changes. Passes the Tab Index and Tab Label. Use this to show/hide screen sections or filter content.
Tab 1-6 Click Action -- Individual actions for each tab. Fire when that specific tab is tapped.
Tips & Best Practices
Use Filter Values to drive list filters. Instead of placing 3 separate lists with visibility conditions, place one list and filter it using the tab's Filter Value via Magic Text. This simplifies your screen and keeps your component tree clean.
Use the On Tab Changed action to control visibility of other components on the screen. Set up conditional visibility rules based on the Selected Tab Index form value.
Keep tab labels short -- one or two words max. Long labels get truncated or cause layout issues, especially with 5-6 tabs.
Use badges sparingly. They're powerful attention-grabbers, but too many badges create visual noise. Reserve them for genuinely actionable counts (unread messages, pending tasks).
Choose Underline style for a clean, modern look. Use Pill or Filled style when you want more visual separation between tabs.
Set Dynamic Width when tab labels vary significantly in length (e.g., "Home" vs. "Notifications"). Use Same Size when all labels are similar length for a balanced layout.
Filter Values support Magic Text input. You can bind a tab's filter values to database fields if the filter criteria are dynamic.
Example Use Cases
Order Status Tabs (Filter Values): Create 3 tabs: "All", "Open", "Completed". Set Filter Value 1 on each tab to blank, "Open", and "Completed" respectively. Place one Orders list on the screen and filter the Status field by the Tabs Container's Filter Value 1 Magic Text. When the user taps "Open", only open orders appear -- no visibility rules needed.
Profile Screen: Tabs for "Posts", "Followers", "Following". Use On Tab Changed to filter the list below to show the selected category.
Dashboard: Tabs for "Overview", "Analytics", "Settings". Each tab shows a different section of dashboard content.
E-Commerce Product Page: Tabs for "Description", "Reviews", "Specs". Use badges on the Reviews tab to show the number of new reviews.
Messaging App: Tabs for "All", "Unread", "Archived". Use a badge on the Unread tab with the count of unread messages.
Multi-Filter Dashboard: Use all 3 filter values per tab to control multiple filters at once. For example, Tab 1 ("Active Deals"): Filter 1 = "Active", Filter 2 = "Sales", Filter 3 = "2026". Tab 2 ("Closed Deals"): Filter 1 = "Closed", Filter 2 = "Sales", Filter 3 = "2026". Each filter value drives a different list filter on the same screen.
Last updated
Was this helpful?