> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/tabs.md).

# Tabs

<figure><img src="/files/ctqW87GOdcTYgnFSFM3I" alt="" width="375"><figcaption></figcaption></figure>

Tabs organizes flow screen content into selectable sections. Use it to switch between logical states, control which components are visible, or filter query results — all without navigating away from the screen.

***

## Overview

Tabs displays a set of labelled tabs. Only one tab is active at a time; the active tab drives flow logic through its output value. Use Flow Builder's standard **Set Component Visibility** feature to show and hide components that belong to each tab.

{% @arcade/embed url="<https://app.arcade.software/share/9SJ11dmkFalwW5kDZO9U>" flowId="9SJ11dmkFalwW5kDZO9U" %}

***

## Configuration

To configure it, click the component on the Flow screen. The **Edit Tabs Component** panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Data Source

The **Data Source** setting determines where the tab names come from.

| Data Source                                                      | Best For                                  | When to Use                                                  |
| ---------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------ |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Fixed, pre-defined tab names              | Static tabs that never change                                |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Tab names from a Flow collection variable | Tabs driven by prior flow steps                              |
| [**Picklist**](/flow/component-builder/data-sources/picklist.md) | A Salesforce picklist field's values      | Letting data define the tab set                              |
| [**Query**](/flow/component-builder/data-sources/query.md)       | Live Salesforce records                   | Dynamic tab sets fetched without a separate Get Records step |

<figure><img src="/files/BtNZGVxYjYxXucjctjw8" alt=""><figcaption></figcaption></figure>

### Data Mapping

When using Variable, Query, or Picklist, configure **Data Mappings** in the Properties tab to tell the component how to build each tab from your data:

* **Label** — The tab title.
* **Value** — Unique identifier for the tab; must match **Active Item Value** to pre-select a tab on load.
* **Tooltip** — Tooltip text shown on hover.
* **Subtitle** — Secondary text displayed below the tab label.
* **Left/Right/Top Icon Name** — Icons displayed on the tab alongside the label.
* **Left/Right/Top Icon Size** — Size of the corresponding icon.

### Properties

**Active Item Value** sets which tab is open by default when the screen loads. Enter the exact value associated with the tab you want to display — spelling and capitalization must match.

<figure><img src="/files/Lui0RkhOG72vkJiM8ihN" alt=""><figcaption></figcaption></figure>

**Scrollable** makes the tab bar horizontally scrollable when the tabs exceed the available width, instead of collapsing extras into an overflow menu.

**Show Scroll Buttons** adds navigation arrows on either side of the tab bar so users can step through hidden tabs. Requires **Scrollable** to be enabled.

**Show Scroll Buttons Mobile** keeps the scroll buttons visible on mobile devices. Without this, the buttons are hidden on mobile to allow native touch scrolling. Requires **Show Scroll Buttons** to be enabled.

> **Which scroll option is right for you?** Scrollable without buttons gives a cleaner look and suits a small number of overflow tabs. Scrollable with buttons helps when there are many tabs and users need to know how many there are.

<figure><img src="/files/hoctNnOnZIbX0rtRy5Im" alt=""><figcaption></figcaption></figure>

**Scoped** wraps the tabs in a bordered container, giving them a closed, card-like visual appearance.

**Orientation** controls the layout of the tab bar.

| Orientation                | What it looks like                    | Best For                                       |
| -------------------------- | ------------------------------------- | ---------------------------------------------- |
| **Horizontal** *(default)* | Tabs appear at the top of the content | Standard tab navigation                        |
| **Vertical**               | Tabs appear as a side list            | Many tabs, or when horizontal space is limited |

<figure><img src="/files/SO1peN5uHko1eJngbrEj" alt=""><figcaption><p>Horizontal vs Vertical Tabs</p></figcaption></figure>

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Tabs. Configure them from the **Interactions** tab of the Edit Tabs panel.

### Active

Fires when the user selects a tab. Use this to navigate to another screen, update a flow variable, or filter query results based on the selected tab.

***

## Styling

The Avonni Tabs component offers a wide range of styling options to integrate with your design and provide a user-friendly experience.

{% tabs %}
{% tab title="Layout and Spacing" %}

* **Margin:** Control the spacing around the Tabs component to perfectly position it within its surrounding elements.
* **Padding:** Adjust the inner spacing within the tab container to fine-tune the layout and visual appeal.
* **Size:** Easily modify the overall width and height of the Tabs component to fit your specific design requirements
  {% endtab %}

{% tab title="Visual Appearance" %}

* **Background:** Personalize the background color of the tab container to match your application's color scheme.
* **Border:** Add a border to enhance the visual definition of the tab container. You can customize the border's style (solid, dashed, etc.), color, and thickness.
* **Item:** Style each tab to create a distinct look. This includes options for:
  * **Background color:** Set different background colors for tabs in various states (e.g., active, hover).
  * **Hover effects:** Provide visual feedback to users by adding hover effects like background color changes or underlines.
  * **Selected state:** Indicate the currently active tab with a distinct style
    {% endtab %}

{% tab title="Text and Labels" %}

* **Item Label:** Customize the appearance of the text within each tab label. You can adjust the:
  * **Font:** Choose a font that aligns with your overall design.
  * **Size:** Control the font size for optimal readability.
  * **Color:** Set the color of the tab labels to ensure clear visibility.
* **Item Subtitle:** If you're using subtitles beneath your tab labels, you can style these independently to provide additional information or context
  {% endtab %}

{% tab title="Navigation for Many Tabs" %}
**Overflow Buttons:** When you have many tabs that exceed the available space, Avonni provides overflow buttons to enable scrolling. You can customize the appearance of these buttons to blend with your design seamlessly
{% endtab %}
{% endtabs %}

***

## Output Variables

The Tabs component exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Tabs component, and pick the output variable you need.

### Active Tab

| Output variable        | Type             | What it returns                                                                                    |
| ---------------------- | ---------------- | -------------------------------------------------------------------------------------------------- |
| **Active Tab Value**   | Text (String)    | The value of the tab the user has selected.                                                        |
| **Active Tab SObject** | Record (SObject) | The Salesforce record associated with the active tab, when the data source is a record collection. |

> **Example:** After a Tabs component whose tabs are populated from an Account query, store **Active Tab Value** in a flow variable and use it in a decision element to branch the flow based on which account tab the user opened.

### Others

| Output variable     | Type    | What it returns                                             |
| ------------------- | ------- | ----------------------------------------------------------- |
| **Number of items** | Integer | The total number of tabs currently loaded in the component. |

### Flow Interaction Output Variables

Like all interactive Flow components, the Tabs component exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.avonnicomponents.com/flow/flow-components/tabs.md?ask=<question>
```

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.