In Lightning Web Components (lwc), not Aura, a lightning-tabset has an active-value-tab attribute. How do I change the tab in focus.

In a two tab (lightning-tab) based lightning-tabset, the main (default) tab has a list of tiles. The second tab contains the details of the selected tile.

I want the second tab to refresh with the data of the selected tile and become focused when the tile is clicked.

At the moment you cannot create a component dynamically with lwc so I want to reuse an existing tab.

This lightning-tabset has a lightning-tab child component (containing a list). This child component has a child component (tile) that generates a CustomEvent when selected.

When the custom event is passed up through the parents to the lwc that contains the lightning-tabset. How do I get the correct lightning-tab to open (set focus).

Do I use querySelector and setAttribute('active-tab-value' ...) or some other means?


4 Answers 4


It is very easy to put focus on specific tab on Tabset control in LWC... here is below running snippet

import { LightningElement, track } from 'lwc';
export default class TabsetBasic extends LightningElement {
       this.template.querySelector('lightning-tabset').activeTabValue = 'Item Three';

   <lightning-tabset variant="scoped" active-tab-value ="">
       <lightning-tab label="Item One" value="Item One">
           One Content !
       <lightning-tab label="Item Two" value="Item Two" title="2nd tab extended title">
           Two Content !
       <lightning-tab label="Item Three" value="Item Three">
           Three Content !
    <lightning-button onclick={handleClick} label="Click Me"></lightning-button>

SetAttribute is meant for DOM Element Attributes. Attributes of web components are directly accessible on the element (when decorated via @api).

So when you want to change the tab you can use

this.template.querySelector('lightning-tabset').activeTabValue = '<id_value_of_your_tab';

All tabset components have an attribute called active-tab-value. Simply create a class attribute and bind it to it. Note, ensure your tab have its value attribute populated first though because it's the same value you should use.


If you're trying to give focus to a tab you're creating on the fly, you'll need to put code into renderedCallback() to address this. For example:

renderedCallback() {

        if(this.individualTabValue !== undefined) {
            this.template.querySelector('.mainTabset').activeTabValue = this.individualTabValue;
            this.individualTabValue = undefined;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .