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

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.

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

See lightning-tabset 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.

This component has usage differences from its Aura counterpart. See Base Components: Aura Vs Lightning Web Components in the Lightning Web Components Developer Guide.

active

The event fired when a tab becomes active.

The event properties are as follows.