lightning:tab (Beta)

A single tab that is nested in a lightning:tabset component.

A lightning:tab keeps related content in a single container. The tab content displays when a user clicks the tab. lightning:tab is intended to be used with lightning:tabset.

This component inherits styling from tabs in the Lightning Design System.

The label attribute can contain text or more complex markup. In the following example, aura:set is used to specify a label that includes a lightning:icon.

 <aura:component>
    <lightning:tabset>
        <lightning:tab>
            <aura:set attribute="label">
                Item One
                <lightning:icon iconName="utility:connected_apps" />
            </aura:set>
        </lightning:tab>
    </lightning:tabset>
</aura:component>
    
Usage Considerations

This component creates its body during runtime. You won’t be able to reference the component during initialization. You can set your content using value binding with component attributes instead. See lightning:tabset for more information.

Methods

This component supports the following method.

focus(): Sets the focus on the element.

Attributes

Attribute Name Attribute Type Description Required?
accesskey String Specifies a shortcut key to activate or focus an element.
body ComponentDefRef[] The body of the tab.
id String The optional ID is used during tabset's onSelect event to determine which tab was clicked.
label Component[] The text that appears in the tab.
onblur Action The action triggered when the element releases focus.
onfocus Action The action triggered when the element receives focus.
tabindex Integer Specifies the tab order of an element (when the tab button is used for navigating).
title String The title displays when you hover over the tab. The title should describe the content of the tab for screen readers.
onactive Action The action triggered when this tab becomes active.