# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/tabs-container.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.