# Tabset

## Overview

The Tabset component allows you to easily switch between different views. Each tab serves as a container, so you can customize it with the necessary components.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F9yW4UeQIN3ewd8kFzbGI%2FCleanShot%202025-09-09%20at%2015.02.52%402x-min.png?alt=media&#x26;token=25bdf73a-aae8-4c7d-b936-38e790748528" alt=""><figcaption></figcaption></figure>

{% content-ref url="../../how-tos/components-recipes/using-tabset-component-in-the-app" %}
[using-tabset-component-in-the-app](https://docs.uibakery.io/how-tos/components-recipes/using-tabset-component-in-the-app)
{% endcontent-ref %}

### Properties

<table><thead><tr><th width="149.6640625">Name</th><th width="126.1328125">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>selectedIndex</code></td><td><code>number</code></td><td>Index of the currently selected tab</td></tr><tr><td><code>length</code></td><td><code>number</code></td><td>Total number of tabs</td></tr><tr><td><code>value</code></td><td><code>value</code></td><td>Current component value</td></tr><tr><td><code>children</code></td><td><code>children</code></td><td>Children elements within the component</td></tr><tr><td><code>valid</code></td><td><code>boolean</code></td><td>Indicates if the component is valid</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="154.75390625">Name</th><th width="134.87109375">Parameters</th><th width="101.92578125">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 index</td></tr><tr><td><code>setValue</code></td><td><code>data: object</code></td><td><code>void</code></td><td>Set component data. Data is an object with arbitrary structure.</td></tr><tr><td><code>resetValue</code></td><td>–</td><td><code>void</code></td><td>Reset component to the initial value</td></tr><tr><td><code>validate</code></td><td>–</td><td><code>void</code></td><td>Trigger form validation</td></tr><tr><td><code>resetValidation</code></td><td>–</td><td><code>void</code></td><td>Clear validation errors</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="144.88671875">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
* Background
* 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%2FhpS7WDWZHfPaC4SMGCvR%2FCleanShot%202025-10-08%20at%2011.11.27%402x-min.png?alt=media&#x26;token=5356f845-ac66-44d3-a529-7660621d28bf" alt=""><figcaption></figcaption></figure>