Tab

A lightning-tab component keeps related content in a single container. The tab content displays when a user clicks the tab. Use lightning-tab as a child of the lightning-tabset component.

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

Use the label attribute to specify the tab's text label.

To display an icon at the beginning of the label, use the icon-name attribute. Provide alternative text for the icon using icon-assistive-text.

To display an icon at the end of the label, use the end-icon-name attribute. Provide alternative text for that icon using end-icon-alternative-text.

Specify the show-error-indicator attribute to display an error indicator in the tab after the label. If an end icon is present, the error indicator is displayed after the icon.

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