---
examples:
 - name: basic
   label: Basic Tabset
   description: A tabset includes content within tabs.
 - name: scoped
   label: Tabset with Scoped Variant
   description: The scoped variant displays the tabset with a different visual styling than the default.
 - name: activeTab
   label: Tabset with Default Selected Tab
   description: A tabset can display an active tab by default using the active-tab-value attribute.
 - name: conditionalTab
   label: Tabset with Conditional Tabs
   description: A tab can be displayed or hidden conditionally.
 - name: onactive
   label: Tabset with Content Added When Tab is Selected
   description: Programmatically add content to a tab when the tab is selected. Tab's content is a message with the selected tab's value.
 - name: overflow
   label: Tabset with Overflow Tabs
   description: Overflow tabs are hidden from view when the view port is not wide enough. Overflow tabs are grouped in a dropdown menu labelled "More".
 - name: vertical
   label: Tabset with Vertical Variant
   description: A tabset can be displayed vertically using the vertical variant.
---
A `lightning-tabset` displays a tabbed container with multiple content areas,
only one of which is visible at a time. Tabs are displayed 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`](bundle/lightning-tab/documentation) components as part of its body. The first tab is activated by default.

Set the `variant` attribute to change the look of the tabset. The `variant` attribute can be set to `default`, `scoped`, or `vertical`. See __Design Guidelines__ for more information.

This component inherits styling from
[tabs](https://www.lightningdesignsystem.com/components/tabs/) in the
Lightning Design System.

Next is an example of a standard horizontal tabset.
```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>
```

 #### 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.

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

```

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

```javascript
import { LightningElement, track } from 'lwc';

export default class ActiveTabExample extends LightningElement {

    @track tabContent = '';

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

```

#### Design Guidelines

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

We don't recommend 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.

Use tabset variants to group your content.
* The `default` variant 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.
* The `scoped` variant 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 displayed. When you click those tabs, the content at the bottom remains the same while the content at the top changes for the activity.
* The `vertical` variant is similar in appearance to the scoped variant, but the tabs are arranged 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.

#### Usage Considerations

When a tabset contains more tabs than could fit on the screen, the tabs that don't fit are moved into a dropdown menu (also known as an overflow) next to the last tab that fits. Note that the active tab always shows and is never moved into the overflow.

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.

Tab content is lazy loaded, and as such 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](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
