---
schema_version: "1"
id: 3c676db879e82a68c71ecd5e6ac41feccd5d3cf9fc96598c8b2d52fe55c18d24
title: Tabset Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_tabset_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_tabset_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: c35614e97e2a1448c967c5e2ff75364227863b0c7160d084f0bd743173837673
description: For the managed package runtime, this page contains a Tabset LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Tabset Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Tabset LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Summer '20

The _Tabset Lightning Web Component_ displays a tabbed container with multiple content areas, only one of which is visible at a time. A tabset can hold multiple `c-tab` components. The first tab is activated by default.

## Available c-tabset Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:20%">
          <col style="width:20%">
          <col style="width:20%">
          <col style="width:20%">
          <col style="width:20%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e74">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e80">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e86">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e92">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e98">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e74 ">
              <p style="margin-bottom:0;">active-tab-value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e80 ">
              <p style="margin-bottom:0;">tab index</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e86 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e92 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e98 ">
              <p style="margin-bottom:0;">Specifies which tab is active by default. use the position (index) of a <code>c-tab</code>component. By default, the first tab is active.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e74 ">
              <p style="margin-bottom:0;">hideTabNav</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e80 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e86 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e92 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e98 ">
              <p style="margin-bottom:0;">To hide the tab navigation bar, set to true.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e74 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e80 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e86 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e92 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e98 ">
              <p style="margin-bottom:0;">Sets the theme for the tabset component.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e74 ">
              <p style="margin-bottom:0;">variant</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e80 ">
              <p style="margin-bottom:0;">standard, scoped, vertical, default (Default: default)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e86 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e92 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e98 ">
              <p style="margin-bottom:0;">Sets the appearance of the tabset.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Available Event Listeners

ontabchange

Triggers when the tab is changed, it returns the tabIndex and tab-id, if tab-id is passed on `c-tab`, if tab-id is not specified only tabIndex will be returned as result.

## Example c-styles Component

```

<!-- When using the index positon as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="1">
    <c-tab title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>

<!-- When using the id as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="tabOne">
    <c-tab id="tabOne" title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab id="tabTwo" title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>
```

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _Tabset Lightning Web Component_ displays a tabbed container with multiple content areas, only one of which is visible at a time. A tabset can hold multiple `c-tab` components. The first tab is activated by default.

## Available c-tabset Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e282">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e288">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e294">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e300">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e306">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28957e313">&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e282 ">
              <p style="margin-bottom:0;">active-tab-value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e288 ">
              <p style="margin-bottom:0;">tab index</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e294 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e300 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e306 ">
              <p style="margin-bottom:0;">Specifies which tab is active by default. use the position (index) of a <code>c-tab</code> component. By default, the first tab is active.</p>
            </td>

            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e313 ">&nbsp;</td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e282 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e288 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e294 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e300 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e306 ">
              <p style="margin-bottom:0;">Sets the theme for the tabset component.</p>
            </td>

            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e313 ">&nbsp;</td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e282 ">
              <p style="margin-bottom:0;">variant</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e288 ">
              <p style="margin-bottom:0;">standard, scoped, vertical, default (Default: default)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e294 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e300 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e306 ">
              <p style="margin-bottom:0;">Sets the appearance of the tabset.</p>
            </td>

            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d28957e313 ">&nbsp;</td>

          </tr>
        </tbody>
      </table>

## Available Event Listeners

ontabchange

Triggers when the tab is changed, it returns the tabIndex and tab-id, if tab-id is passed on `c-tab`, if tab-id is not specified only tabIndex will be returned as result.

## Example c-styles Component

```
<!-- When using the index positon as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="1">
    <c-tab title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>

<!-- When using the id as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="tabOne">
    <c-tab id="tabOne" title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab id="tabTwo" title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>
```

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _Tabset Lightning Web Component_ displays a tabbed container with multiple content areas, only one of which is visible at a time. A tabset can hold multiple `c-tab` components. The first tab is activated by default.

## Available c-tabset Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d28957e472">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d28957e478">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d28957e484">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d28957e490">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d28957e496">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d28957e503">&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e472 ">
              <p style="margin-bottom:0;">active-tab-value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e478 ">
              <p style="margin-bottom:0;">tab index or tab id</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e484 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e490 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e496 ">
              <p style="margin-bottom:0;">Specifies which tab is active by default. Use the id of a <code>c-tab</code> component or use the position (index) of a <code>c-tab</code> component. By default, the first tab is active.</p>
            </td>

            <td data-label="" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e503 ">&nbsp;</td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e472 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e478 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e484 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e490 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e496 ">
              <p style="margin-bottom:0;">Sets the theme for the tabset component.</p>
            </td>

            <td data-label="" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e503 ">&nbsp;</td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e472 ">
              <p style="margin-bottom:0;">variant</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e478 ">
              <p style="margin-bottom:0;">standard, scoped, vertical, default (Default: default)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e484 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e490 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e496 ">
              <p style="margin-bottom:0;">Sets the appearance of the tabset.</p>
            </td>

            <td data-label="" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d28957e503 ">&nbsp;</td>

          </tr>
        </tbody>
      </table>

## Example c-styles Component

```
<!-- When using the index positon as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="1">
    <c-tab title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>

<!-- When using the id as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="tabOne">
    <c-tab id="tabOne" title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab id="tabTwo" title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>
```