# 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**](https://docs.appfarm.io/library/ui-components/visibility-group).

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