# Tabs

> Tabs control properties for Studio Web apps, including tab name, page source, and visibility settings for each tab displayed in the control at runtime.

## General

When you add the **Tab** control, it displays three tabs by default (**Tab 1**, **Tab 2**, **Tab 3**). Expanding each tab within the control exposes the following properties:

* **Tab name** - The display name of the tab.
* **Page source** - The Apps page to import within this tab.
* **Hidden**- If true, hides the control at runtime.
* **Disabled** - If true, disables the control at runtime.

The following properties apply to the entire **Tab** control.

* **Add new tab** - Add new tab to your data by clicking the plus "+" icon.
* **Active tab index** - Navigate to a specific tab using this property. The index starts at 0. For example, if you have four consecutive tabs named "Tab1", "Tab2", "Tab3", and "Tab4", then "Tab1" has the index `0`, "Tab2" has the index `1`, "Tab3" has the index `2`, and "Tab4" has the index `3`.
* **Hidden**- If true, hides the control at runtime.
* **Disabled** - If true, disables the control at runtime.

## Events

* **Value changed**—Configure what happens when the value is changed.

## Style

* **Control Alignment** - By default, it is set to **Stretch**. A different alignment can be set.
  :::note
  The alignment is dependent on the layout selected for the parent (**Vertical** vs **Horizontal**).
  :::
* **Style** - The size of tabs and the color for an active tab.
* **Border** - The border for the control. Border **Thickness**, **Color**, and **Radius** can be configured.
* **Font** - The font attributes for the tab text, such as font family, size, or color. By default, the control inherits the font family of the immediate parent container which is indicated by the keyword "Inherited".
* **Margin** - The margin of the control. By default, a margin of 4px is set. **Top/Bottom** and **Left/Right** margin properties are combined. These properties can be detached using the **Link** button at the right side of the **Margin** section.
* **Size** - The width and height of the control. By default, the size is set to `auto`. To set minimum or maximum values, click the three dot icon (...). If the size of the control is smaller than the options, a scroll bar is displayed.

## VB properties

| VB property | Data type | Description |
| --- | --- | --- |
| `ActiveTabIndex` | Integer | Index of the currently active tab. |
| `ActiveTabName` | String | Name of the currently active tab. |
| `Hidden` | Boolean | If true, hides the control at runtime. |
| `Disabled` | Boolean | If true, disables the control at runtime. |

## Keyboard Shortcuts

For improved accessibility, you can use the following keyboard shortcuts in the tabs list from the **General** tab in the configuration panel:

* **Up** and **Down** arrow keys to change the selected tab.
* **Alt**+**Up** arrow key to move the selected tab up.
* **Alt**+**Down** arrow key to move the selected tab down.