Tab
Tab
lightning-tab
A single tab in a tabset component.
For Use In
Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline
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.
Usage Considerations
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.
<lightning-tabset>
<lightning-tab label="Item One"> Content for tab 1 </lightning-tab>
<template if:true={showTabTwo}>
<lightning-tab label="Item Two"> Content for tab 2 </lightning-tab>
</template>
</lightning-tabset>This component has usage differences from its Aura counterpart. See Base Components: Aura Vs Lightning Web Components in the Lightning Web Components Developer Guide.
Custom Events
active
The event fired when a tab becomes active.
The event properties are as follows.
| Property | Value | Description |
|---|---|---|
| bubbles | true | This event bubbles up through the DOM. |
| cancelable | true | This event can be canceled. You can call preventDefault() on this event. |
| composed | true | This event propagates outside of the component in which it was dispatched. |
Attributes
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
| end-icon-alternative-text | The alternative text for the icon specified by end-icon-name. | string | ||
| end-icon-name | The Lightning Design System name of an icon to display at the end of the tab label. Specify the name in the format 'utility:check' where 'utility' is the category, and 'check' is the icon to be displayed. | string | ||
| icon-assistive-text | The alternative text for the icon specified by icon-name. | string | ||
| icon-name | The Lightning Design System name of an icon to display at the beginning of the tab label. Specify the name in the format 'utility:down' where 'utility' is the category, and 'down' is the icon to be displayed. Only utility icons can be used. | string | ||
| label | The text displayed in the tab header. | string | ||
| show-error-indicator | Specifies whether there's an error in the tab content. An error icon is displayed to the right of the tab label. | boolean | ||
| title | Specifies text that displays in a tooltip over the tab content. | string | ||
| value | The optional string to identify which tab was clicked during the tab's active event. This string is also used by active-tab-value in tabset to open a tab. | string |
Methods
| Name | Description | Argument Name | Argument Type | Argument Description |
|---|---|---|---|---|
| loadContent | Reserved for internal use. | |||
Slots
| Name | Description |
|---|---|
| default | Placeholder for your content in lightning-tab. |
Specifications
Tab