# Tabs

**Tabs** may be added to your UI to represent menus or submenus.

You typically use **Tabs** inside a view or a dialog, to control which parts of the UI should be displayed. Example: A dialog for displaying info for an *Order* with two **Tabs**: *Order Info* and *Order Lines*, and you only want to display either *Order Info* or the *Order Lines*, depending on which **Tab** the User clicked.

{% hint style="info" %}
A full example setup on **Tabs** (combined with a **Visibility Group**) is available in our [Showroom](https://showroom.appfarm.app/ui-components/tabs). You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register on [Showroom Signup](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Settings

### Active Tab Value

When the user clicks the tabs, the information on which tab is clicked needs to be stored somewhere.

The **Tabs** UI component itself does not hold the *Order Info* properties or *Orderliness* - it only holds

* Which tab was clicked (stored in the **Active Tab** Value)
* Which tabs are available (explained further down)

So, you need a variable to hold this information (which tab was clicked).

1. Add a variable to your App Variables (the built-in Data Source found in the **App Data** menu). It would typically be an integer data type. Example for order dialog: Name the property `Order - Active Tab Value` and set the default value to `0`.
2. Active **Tab** Value: Select **Data Binding** and select the property you added in 1).

### Tabs

Add a tab, or two, or three.

* **Label**: The visible name for the tab.
* **Icon**: If you want an icon above the label.
* **Tab Value**: Automatically set. This is the value to write back to, to property bound in **Active Tab Value** when this tab is clicked.

## Use Tabs to control the visibility of UI Components

In our example above, the value 0 or 1 is saved into `App variables.Order - Active Tab Value` property when the tabs are clicked.

We simply need to control *what should be visible* depending on this value.

You could add two **Containers**, one being visible if **Active Tab Value** is 0, and another if 1. But let us do something smarter.

The best way to do it is to add a [**Visibility Group**](/library/ui-components/visibility-group.md).

A **Visibility Group** with Control Mode `Controlled` may have a **Visible Index**. Select the same property here as in the **Active Tab Value**, for example, `App variables.Order - Active Tab Value`.

You may add two **Containers** inside the **Visibility Group**, the first is recognized as index 0, the second as index 1.

When the property bound in the **Visible Index** changes, for example from 0 to 1, the second **Container** will be displayed - since it is located at index 1 inside the **Visibility Group**.


---

# 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://docs.appfarm.io/library/ui-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.