# Tabs

## Overview

A series of tabs. The component supports *manual* (for a static options list) and *dynamic* options configuration.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FyCj9fA4bVBaPDFunet8x%2FCleanShot%202025-09-09%20at%2014.37.03%402x-min.png?alt=media&#x26;token=71ae5578-b567-438b-9476-3eb75eb2f746" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="139.15625">Name</th><th width="119.98046875">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>length</code></td><td><code>number</code></td><td>Total number of tabs</td></tr><tr><td><code>selectedTab</code></td><td><code>tab</code></td><td>The selected tab (alternative property to <em>index</em>)</td></tr><tr><td><code>selectedIndex</code></td><td><code>number</code></td><td>Index of the currently selected tab</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="120.953125">Name</th><th width="140.29296875">Parameters</th><th width="95.94140625">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>selectTab</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Select tab by its index</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="158.80078125">Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td><td></td></tr><tr><td><strong>On Tab Change</strong></td><td>Triggered when a tab is switched</td><td></td></tr></tbody></table>

## Working with the component

In the right side panel, under the *Appearance* section, you can set up how your component will look like. You can configure such settings as:

* Height
* Margin
* Tabs overflow style
* Tab text wrap
* Tabs style

*Tabs overflow* and *text wrap* allow you to control the layout: you can switch between **Arrows** and **Scroll** and enable text wrapping for longer tabs to keep things readable.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FEc80QxjfKZUIvOfcCa6W%2FCleanShot%202025-10-07%20at%2016.27.08%402x-min.png?alt=media&#x26;token=d83b05d9-3727-4384-8856-fea223cc5bf1" alt=""><figcaption></figcaption></figure>