---
schema_version: "1"
id: 37cb50c313da55eef69033fcfca3dfa00167e6735b3468d9004729e375eb3c14
title: Tab
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/tab/lightning-tab.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-tab.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: c1def042d8f5a0652edb35dc546ac1dd8db76a07fe8a40c746f997309e8386a1
products:
  - Lightning Component Reference
---
# Tab

**`lightning-tab`**

A single tab in a tabset component.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

A `lightning-tab` component keeps related content in a single container. The tab content is visible when you click the tab. Use `lightning-tab`
as a child of the [`lightning-tabset`](/docs/platform/lightning-component-reference/guide/lightning-tabset.html) component.

Use the `label` attribute to specify the tab's text label.

To append an icon at the beginning of the label, use the `icon-name` attribute. Provide alternative text for the icon by using `icon-assistive-text`.

To append an icon at the end of the label, use the `end-icon-name` attribute. Provide alternative text for that icon by using `end-icon-alternative-text`.

Specify the `show-error-indicator` attribute to include an error indicator in the tab after the label. If an end icon is present, the error indicator is appended after the icon.

## Design

Use `lightning-tab` within `lightning-tabset`, which implements the tabs blueprint in the Salesforce Lightning Design System (SLDS). The tabs adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Tabs](https://v1.lightningdesignsystem.com/components/tabs/)                                                                         | [Tabs](https://www.lightningdesignsystem.com/components/tabs/)                                                  |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Usage

Tab content is lazy loaded. You can only query the content for the active and previously active tabs.

See [`lightning-tabset`](/docs/platform/lightning-component-reference/guide/lightning-tabset.html) for more
information.

You can nest `lightning-tab` within other elements, such as `<div>` or `<template>`, for example to render tabs conditionally using `if:true` and `if:false`. Otherwise, you must nest
`lightning-tab` directly within `lightning-tabset` tags.

For example, you want to show a tab conditionally.

<!-- prettier-ignore-start -->
```html
<lightning-tabset>
    <lightning-tab label="Item One"> Content for tab 1 </lightning-tab>
    <template if:true={showTabTwo}>
        <lightning-tab label="Item Two"> Content for tab 2 </lightning-tab>
    </template>
</lightning-tabset>
```
<!-- prettier-ignore-end -->

This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.

## Custom Events

**`active`**

The event fired when a tab becomes active.

The event properties are as follows.

| Property   | Value | Description                                                                |
| ---------- | ----- | -------------------------------------------------------------------------- |
| bubbles    | true  | This event bubbles up through the DOM.                                     |
| cancelable | true  | This event can be canceled. You can call `preventDefault()` on this event. |
| composed   | true  | This event propagates outside of the component in which it was dispatched. |


:::::

:::::tab
::component-specification{component="tab" model="lwc" namespace="lightning"}

:::::

::::::