# Tabs

> [HTML Version](tabs.html)

By using **Tabs**, you can group associated data and divide a form into logical segments.

To place the widget on a form, drag it from the right panel of the [interface designer](interface_designer.md) to the canvas or click **+Widget**. Read more in [Form templates for apps and processes](360029250931.md).

## Widget settings

Configure the widget in the opened window on the **Main**, **Events**, and **System** tabs.

## Main tab

**(hmfile_hash_077cfe36.png)**

- **Hide single-page tabs**. Select this option if you want to hide the tab name when the widget has:

	- Only one tab configured.

	- Multiple tabs added, but only one is available to the user. You can also specify a condition under which the tab name will be hidden. To do this, link the field to a context variable of the **Yes/No type** using the (hmfile_hash_73caf8b0.png) icon.

- **Arrange horizontally**. Select the checkbox next to the field if you want to change the tab layout from vertical to horizontal. You can also specify a context variable of the Yes/No type whose value will determine the tab layout.



## Events tab

**(tabs_events_tab.PNG)**

This tab allows you to customize the widget’s behavior by selecting functions from scripts that will be called when various events occur. **On mouse enter handler** and **On mouse leave handler** are available for any widget. Find out more in [System widget settings](common_widget_settings.md).

For the **Tabs** widget, you can also set **On tab change handler**. The function selected for it is executed when you switch from one tab to another. For example, you can update the contents of a tab based on user-entered data.

## System tab

The main system settings are the same for all widgets. They allow you to control widget visibility and access to widgets, etc. Read more in the [System widget settings](common_widget_settings.md) article.

For the **Tabs** widget, you can also enable the **Load the contents when the tab is active** option. Then widgets and data on the tab will be loaded only when you switch to it. This allows you to speed up the loading of a form or page.

When you add several tabs, you can change their order. To do that, click on a tab and drag it to a different place within the widget.

To finish configuring the widget, click **Save**. To make the form available to users, click **Save** and then **Publish** on the interface designer toolbar.

## Add a tab

To create a tab in the widget:

1. Click the **+** icon.

**(add_tab_01.png)**

2. In the opened window, specify the title. You can also specify [system settings](common_widget_settings.md) for the new tab.

**(add_tab_02.png)**

3. For each tab, add content that will be displayed if the user clicks on its title.

The created tabs can be rearranged, deleted, and their settings can be edited.

## Example

In this case, the **Tabs** widget is used to divide the employee procedures into three categories.

**(T2.PNG)**