# Tabs

The tabs element allows you to display content under various views which can be selected by the user. The first label here (blue) represents the formatting when the option is selected. 

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

Quick add a new tab by clicking the + sign on the right side.

You can edit the content under each tab by dragging elements into the blue slot.

## **Properties**

To configure the tab, navigate to Config → Property. Under Tab Options, you’ll see a pair of inputs for each tab. The upper input is the actual value that tab takes on, and the lower is the display value.

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

**Tab options:** Each tab has a pair of input boxes.

1. Enter the value of the tab in the first input box.&#x20;
2. Enter the display name of the tab into the second input box.

Add additional tabs with “+ Add an item”.

**Default tab:** The value of the default tab to display.

**Type:** Choose a style type. Options include the default, card, or border-card.

**Position:** Position the tabs at the top, right, bottom, or left of the element.

See [Tooltip](/app-builder/app-construction/elements/tooltip.md) for tooltip configurations.

## Supported Events

No supported events.

## Supported Actions

**Set Data:** Change element data. See [Data Store](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}


---

# 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.acho.io/app-builder/app-construction/elements/web-elements/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.