---
schema_version: "1"
id: f6c2142323b659f07bda95c69153ff8a038c69d056eefc7337914dc73812abc0
title: Tab 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_tab_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_tab_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 39a6f3a8938bc1f11df1e67bc15889ec6f1a9ecb5d78587f23876496c5e0d84d
description: For the managed package runtime, this page contains a Tab LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Tab Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Tab 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 Winter '20 and Vlocity CME Spring '20

The _Tab Lightning Web Component_ keeps related content in a single container. The tab content displays when a user clicks the tab. This component is a base element of the `c-tabset` component.

## Available c-tab Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <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="d162419e68">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d162419e74">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d162419e80">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d162419e86">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d162419e92">
              <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="d162419e68 ">
              <p style="margin-bottom:0;">label</p>
            </td>

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d162419e92 ">
              <p style="margin-bottom:0;">Sets the visible text for the tab header.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d162419e92 ">
              <p style="margin-bottom:0;">Specifies text that displays in a tooltip over the tab content.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d162419e74 ">
              <p style="margin-bottom:0;">(Format: utility:down)</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d162419e92 ">
              <p style="margin-bottom:0;">Sets icon for the tab. Must use utility icons only. See <a href="https://lightningdesignsystem.com/icons/" target="_blank">Lightning Design System Icons</a>.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d162419e92 ">
              <p style="margin-bottom:0;">Sets the alternative text for the icon specified by <em>icon-name</em>.</p>
            </td>

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

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

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

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

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

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d162419e92 ">
              <p style="margin-bottom:0;">Sets unique id to the tab, if provided this will be returned with the tabchange event result.</p>
            </td>

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

## Example c-tab Component

The c-tab is defined as an element inside c-tabset and has its own id so user can update and modify the content directly.

```
<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-tabs>
```

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

The _Tab Lightning Web Component_ keeps related content in a single container. The tab content displays when a user clicks the tab. This component is a base element of the `c-tabset` component.

## Available c-tab Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <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="d162419e321">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d162419e327">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d162419e333">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d162419e339">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d162419e345">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d162419e321 ">
              <p style="margin-bottom:0;">label</p>
            </td>

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d162419e345 ">
              <p style="margin-bottom:0;">Sets the visible text for the tab header.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d162419e345 ">
              <p style="margin-bottom:0;">Specifies text that displays in a tooltip over the tab content.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d162419e327 ">
              <p style="margin-bottom:0;">(Format: utility:down)</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d162419e345 ">
              <p style="margin-bottom:0;">Sets icon for the tab. Must use utility icons only. See <a href="https://lightningdesignsystem.com/icons/" target="_blank">Lightning Design System Icons</a>.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d162419e345 ">
              <p style="margin-bottom:0;">Sets the alternative text for the icon specified by <em>icon-name</em>.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d162419e345 ">
              <p style="margin-bottom:0;">To hide the tab title, set to false.</p>
            </td>

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

## Example c-tab Component

The c-tab is defined as an element inside c-tabset and has its own id so user can update and modify the content directly.

```
<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-tabs>
```