All You Need to Know About Lightning-tabset and Lightning-tabs in Salesforce

What is a Lightning-tabset?

A Lightning-tabset represents a list of tabs. A lightning-tabset displays a tabbed container with multiple content areas, only one of which is visible at a time. 

Syntax:

<template> 
<lightning-tabset> 
<lightning-tab label="Item One"> 
One Content ! 
</lightning-tab> 
<lightning-tab label="Item Two" title="2nd tab extended title"> 
Two Content ! 
</lightning-tab> 
<lightning-tab label="Item Three"> 
Three Content ! 
</lightning-tab> 
</lightning-tabset> 
</template>

Output:

Tabs are displayed horizontally inline with the content shown below them, by default. Use tabs to separate information into logical sections based on functionality or use case. 

A tabset can hold multiple lightning-tab components as part of its body. By default, the first tab is activated. 

The variant attribute can be used to change the look of a tabset. The variant attribute can be set to default, scoped, or vertical. 

Don't forget to check out: Learn About Lightning Design System in Salesforce

Why and When to use a Lightning-tabset? 

• A lightning-tabset enables users to easily switch between tabs to perform tasks without leaving the page. 
• Assign a default tab based on the most important use case for the page. 
• We don't recommend using tabs to define a linear, ordered process since each tab functions independently of the others. 
• A lightning-tabset doesn’t currently support mobile-oriented tabs. This component doesn’t adjust the tab styling when there are two or more immediately adjacent tab sets on mobile. 

Variants in Lightning-tabset 

Apply styling to your content by grouping it using the variation attribute. 

• Default: Creates global tabs by using default. The content of the tab that was previously selected is replaced when you select a new tab. The default variation tab encloses the material below it without physically enclosing it. 
• Scoped: Scoped creates a tab set that has a closed container with a defined border. Scoped tabs are useful for stacking several tabbed sections, where you want to change only a portion of the content displayed. When you click those tabs, the content at the bottom remains the same while the content at the top changes for the activity. 
• Vertical: Vertical resembles the scoped variant in appearance, but the tabs are arranged vertically to the side instead of on the top. 

Check out another amazing blog by Sejal here: What are Scheduled-Triggered Flows in Salesforce?

What are the lightning-tabs? 

A Lightning-tab is a single tab in a tabset component. 

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