# 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.