---
schema_version: "1"
id: 82533919e7d5b73acc000743c290d0e12c2675e5a61de2c8c98c08b10aa838fb
title: Tabset
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/tabset/lightning-tabset.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-tabset.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 124aa6a3d35e85d11b6b65c8da68928c04424e74aa8608f53992257d7a62d075
products:
  - Lightning Component Reference
---

# Tabset

**`lightning-tabset`**

Represents a list of tabs.

**For Use In**

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

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

:::::tab

::component-playground{component="tabset" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-tabset` shows a tabbed container with multiple content areas,
only one of which is visible at a time. Tabs are shown horizontally inline
with content shown below it, by default. Use tabs to separate information into logical sections based on functionality or use case.

A tabset can hold multiple [`lightning-tab`](/docs/platform/lightning-component-reference/guide/lightning-tab.html) components as part of its body. The first tab is activated by default.

## Design

`lightning-tabset` 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

Use `lightning-tabset` to enable users to switch easily between tabs to perform tasks without leaving the page. Assign a default tab based on the most important use case for the page.

Here's an example of a standard horizontal tabset.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-tabset>
        <lightning-tab label="Tab One"> Content of Tab One </lightning-tab>
        <lightning-tab label="Tab Two"> Content of Tab Two </lightning-tab>
    </lightning-tabset>
</template>
```
<!-- prettier-ignore-end -->

We don't recommend by using tabs to define a linear, ordered process since each tab functions independently of the others.

Tab labels must be consistent. For example, use a verb to let users identify a tab's purpose quickly.

`lightning-tabset` doesn’t currently support mobile-oriented tabs. This component doesn’t adjust the tab styling when there are two or more immediately adjacent tab sets on mobile.

## Add Content To Tab Programmatically

To add content programmatically to the tab body, use the `onactive` event handler on `lightning-tab`.
Here's an example with two tabs, which loads content when the tabs are selected.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-tabset>
        <lightning-tab label="Item One" value="1" onactive={handleActive}>
            Here's the content for Item One: {tabContent}
        </lightning-tab>
        <lightning-tab label="Item Two" value="2" onactive={handleActive}>
            Here's the content for Item Two: {tabContent}
        </lightning-tab>
    </lightning-tabset>
</template>
```
<!-- prettier-ignore-end -->

Identify the active tab by using `event.target.value`.

```javascript
import { LightningElement } from "lwc";

export default class ActiveTabExample extends LightningElement {
  tabContent = "";

  handleActive(event) {
    const tab = event.target;
    this.tabContent = `Tab ${event.target.value} is now active`;
  }
}
```

## Component Styling

Set the `variant` attribute to change the look of the tabset. The `variant` attribute can be set to `default`, `scoped`, or `vertical`.

Use a combination of the `variant` and `class` attributes to customize the tab content styles.

### Variants

Specify the `variant` attribute with one of these values.

- `default` creates global tabs. When you select a tab, its content replaces the content of the previously selected tab. The default variant tab encapsulates the content underneath it without enclosing it visually.

- `scoped` creates a tab set that has a closed container with a defined border. Scoped tabs are useful for stacking several tabbed sections, where you want to change only a portion of the content to show. When you click those tabs, the content at the bottom remains the same while the content at the top changes for the activity.

- `vertical` resembles the scoped variant in appearance, but the tabs appear vertically to the side instead of on the top.

You can nest scoped tabs within a global tab set, but don't nest global tabs. If additional hierarchy is necessary, consider using a [`lightning-tree` component](/docs/platform/lightning-component-reference/guide/lightning-tree.html).

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.

This example adds a gray background and padding to the content area on the first tab by using SLDS classes.

<!-- prettier-ignore-start -->
```html
<lightning-tabset>
    <lightning-tab label="Item One" class="slds-theme_shade">
        <p class="slds-p-left--small">Hello Tab 1!</p>
    </lightning-tab>
    <lightning-tab label="Item Two"> </lightning-tab>
</lightning-tabset>
```
<!-- prettier-ignore-end -->

### Styling Hooks

Component styling hooks provide CSS custom properties that use the `--slds-c-*` prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the [SLDS 1 component blueprints](https://v1.lightningdesignsystem.com/components/overview/) for available component styling hooks.

For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.


## Usage Considerations

When a tabset contains more tabs than can fit in the viewport, the extra tabs are moved into an overflow dropdown menu next to the last visible tab. The active tab always shows and is never moved into the overflow.

Truncating the tab label isn't supported. When the tab label has more characters than can fit the viewport, the extra characters are not truncated but are hidden from view.

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

Tab content is lazy loaded; only the active and previously
active tabs content is queryable. In the example, the text `Content of Tab Two` is inserted in the DOM of the page only when the second tab is selected.

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.

## Accessibility

Use the Tab or arrow keys to navigate to the More menu that’s created when the viewport is too narrow to show all the tabs.

Several attributes enable accessibility features for a tabset heading.

Use `heading-label` to specify custom assistive text for a tabset heading. The value of `heading-label` is rendered as the text content of a `div` element with `role="heading"` and `aria-level="2"`. If you don't specify `heading-label` the default assistive text is "Tabs" in a `div` element with `aria-level="2"`.

Use `heading-level` to pass a value between 1 and 6 to the rendered `aria-level` attribute. The default value is 2. This attribute requires you to also specify `heading-label`.

Specify `heading-visible` to display the assistive text above the tabset when you specify `heading-label`. By default, this attribute is not present so the assistive text is read by screen readers but isn't displayed. When `heading-visible` is present, the assistive text is read by screen readers and displayed.

This example sets custom assistive text for a heading, specifies `heading-level` to change the rendered `aria-level`, and makes the heading visible.

<!-- prettier-ignore-start -->
```html
<template>
  <lightning-tabset heading-label="Example tabset" heading-level="3" heading-visible>
    <lightning-tab label="Item One"> One Content! </lightning-tab>
    <lightning-tab label="Item Two"> Two Content! </lightning-tab>
  </lightning-tabset>
</template>
```
<!-- prettier-ignore-end -->


:::::

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

:::::

::::::