Tabs
Tabs are interactive elements that work alongside Tab and Tab Panel to organise content into separate sections or views.
For Tabs to function correctly they must include corresponding Tab and Tab Panel components.
The label attribute on the Tab component provides the Tab with label text.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs> <vwc-tab label="Tab one"></vwc-tab> <vwc-tab label="Tab two"></vwc-tab> <vwc-tab label="Tab three"></vwc-tab> <vwc-tab-panel>Tab Panel one</vwc-tab-panel> <vwc-tab-panel>Tab Panel two</vwc-tab-panel> <vwc-tab-panel>Tab Panel three</vwc-tab-panel> </vwc-tabs>
The icon attribute on the Tab component can set to display an icon from the icon library on the component.
The preferred way to add icons is to use the icon slot.
The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs> <vwc-tab icon="chat-line" label="Comments"></vwc-tab> <vwc-tab icon="playlist-line" label="Playlist"></vwc-tab> <vwc-tab icon="star-line" label="Favourites"></vwc-tab> <vwc-tab-panel>Comments</vwc-tab-panel> <vwc-tab-panel>Playlist</vwc-tab-panel> <vwc-tab-panel>Favourites</vwc-tab-panel> </vwc-tabs>
The icon-trailing attribute on the Tab component positions the icon after the label text.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs> <vwc-tab icon-trailing label="Comments"> <vwc-icon slot="icon" name="chat-line"></vwc-icon> </vwc-tab> <vwc-tab icon-trailing label="Playlist"> <vwc-icon slot="icon" name="playlist-line"></vwc-icon> </vwc-tab> <vwc-tab icon-trailing label="Favourites"> <vwc-icon slot="icon" name="star-line"></vwc-icon> </vwc-tab> <vwc-tab-panel>Comments</vwc-tab-panel> <vwc-tab-panel>Playlist</vwc-tab-panel> <vwc-tab-panel>Favourites</vwc-tab-panel> </vwc-tabs>
The removable attribute on the Tab component adds a close button to the tab.
Clicking the close button or pressing the DELETE key when focussed on the tab will emit the close event.
Triggering the close event does not automatically close the tab and tab panel. This needs to be handled in the consuming application as in the example below.
The consuming application must also handle whether the user can close all the tabs or not.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-tabs>
<vwc-tab label="Tab one" removable></vwc-tab>
<vwc-tab label="Tab two" removable></vwc-tab>
<vwc-tab label="Tab three" removable></vwc-tab>
<vwc-tab-panel>Tab one content</vwc-tab-panel>
<vwc-tab-panel>Tab two content</vwc-tab-panel>
<vwc-tab-panel>Tab three content</vwc-tab-panel>
</vwc-tabs>
<script>
document.querySelector('vwc-tabs').addEventListener('close', (e) => {
const tab = e.srcElement;
const tabs = tab.parentElement;
const tabPanelId = tab.getAttribute('aria-controls');
const tabPanel = document.getElementById(tabPanelId);
if (tabs.querySelectorAll('vwc-tab').length === 1) {
tabs.remove();
return;
}
if (tabPanel) {
tabPanel.remove();
e.srcElement.remove();
}
});
</script>
The disabled attribute on the Tab component disables the Tab.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs> <vwc-tab label="Tab one"></vwc-tab> <vwc-tab disabled label="Disabled tab"></vwc-tab> <vwc-tab label="Tab three"></vwc-tab> <vwc-tab-panel>Tab Panel one</vwc-tab-panel> <vwc-tab-panel>Tab Panel two</vwc-tab-panel> <vwc-tab-panel>Tab Panel three</vwc-tab-panel> </vwc-tabs>
The shape attribute on the Tab component controls the style of the background in hover state. It can be rounded or shape.
The shape variations should not be used in the tab set of tabs. The example above is for demonstration purposes only.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs> <vwc-tab shape="rounded" label="Rounded"></vwc-tab> <vwc-tab shape="sharp" label="Sharp"></vwc-tab> <vwc-tab-panel>Tab Panel one</vwc-tab-panel> <vwc-tab-panel>Tab Panel two</vwc-tab-panel> </vwc-tabs>
The orientation attribute on the Tabs component controls which axis the tabs are aligned. Below is an example of vertical alignment.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs orientation="vertical"> <vwc-tab label="Tab one"></vwc-tab> <vwc-tab label="Tab two"></vwc-tab> <vwc-tab label="Tab three"></vwc-tab> <vwc-tab-panel>Tab Panel one</vwc-tab-panel> <vwc-tab-panel>Tab Panel two</vwc-tab-panel> <vwc-tab-panel>Tab Panel three</vwc-tab-panel> </vwc-tabs>
Use the connotation attribute on the Tabs component to control the color of the active tab. Below it is set to cta.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs connotation="cta"> <vwc-tab label="Tab one"></vwc-tab> <vwc-tab label="Tab two"></vwc-tab> <vwc-tab label="Tab three"></vwc-tab> <vwc-tab-panel>Tab Panel one</vwc-tab-panel> <vwc-tab-panel>Tab Panel two</vwc-tab-panel> <vwc-tab-panel>Tab Panel three</vwc-tab-panel> </vwc-tabs>
Use the activeid attribute on the Tabs component to control which tab is active on first render. The activeid attribute must match an id given to the Tab component.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs activeid="tab-2"> <vwc-tab label="Tab one" id="tab-1"></vwc-tab> <vwc-tab label="Tab two" id="tab-2"></vwc-tab> <vwc-tab label="Tab three" id="tab-3"></vwc-tab> <vwc-tab-panel>Tab Panel one</vwc-tab-panel> <vwc-tab-panel>Tab Panel two</vwc-tab-panel> <vwc-tab-panel>Tab Panel three</vwc-tab-panel> </vwc-tabs>
Use the gutters attribute on the Tabs component to control the spacing inside the Tab Panels. It can be set to small (default) or none (demonstrated in the example below).
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs gutters="none"> <vwc-tab label="Tab one"></vwc-tab> <vwc-tab label="Tab two"></vwc-tab> <vwc-tab label="Tab three"></vwc-tab> <vwc-tab-panel>Tab Panel one</vwc-tab-panel> <vwc-tab-panel>Tab Panel two</vwc-tab-panel> <vwc-tab-panel>Tab Panel three</vwc-tab-panel> </vwc-tabs>
The tabs-layout attribute on the Tabs component controls the tabs layout. When set to stretch, the tabs will stretch to fill the available space. It will have no effect when the tabs are in a vertical orientation.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-tabs tabs-layout="stretch"> <vwc-tab label="Tab one"></vwc-tab> <vwc-tab label="Tab two"></vwc-tab> <vwc-tab label="Tab three"></vwc-tab> <vwc-tab-panel>Tab Panel one</vwc-tab-panel> <vwc-tab-panel>Tab Panel two</vwc-tab-panel> <vwc-tab-panel>Tab Panel three</vwc-tab-panel> </vwc-tabs>
Use the scrollable-panel attribute combined with setting a block-size style to the Tabs component to make the content scrollable.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-tabs class="tabs" scrollable-panel>
<vwc-tab label="Tab one"></vwc-tab>
<vwc-tab label="Tab two"></vwc-tab>
<vwc-tab label="Tab three"></vwc-tab>
<vwc-tab-panel>
<ol>
<li>Stuffed artichokes</li>
<li>Bruschetta</li>
<li>Oven-baked polenta</li>
<li>Salami and Fig Crostini with Ricotta</li>
<li>Rosemary-Potato Focaccia with Goat Cheese</li>
<li>Stuffed artichokes</li>
<li>Bruschetta</li>
<li>Oven-baked polenta</li>
<li>Salami and Fig Crostini with Ricotta</li>
<li>Rosemary-Potato Focaccia with Goat Cheese</li>
</ol>
</vwc-tab-panel>
<vwc-tab-panel>Tab Panel two</vwc-tab-panel>
<vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>
<style>
.tabs {
block-size: 200px;
}
</style>
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-tabs scrollable-panel orientation="vertical" class="tabs">
<vwc-tab label="Tab one"></vwc-tab>
<vwc-tab label="Tab two"></vwc-tab>
<vwc-tab label="Tab three"></vwc-tab>
<vwc-tab-panel>
<ol>
<li>Stuffed artichokes</li>
<li>Bruschetta</li>
<li>Oven-baked polenta</li>
<li>Salami and Fig Crostini with Ricotta</li>
<li>Rosemary-Potato Focaccia with Goat Cheese</li>
<li>Stuffed artichokes</li>
<li>Bruschetta</li>
<li>Oven-baked polenta</li>
<li>Salami and Fig Crostini with Ricotta</li>
<li>Rosemary-Potato Focaccia with Goat Cheese</li>
</ol>
</vwc-tab-panel>
<vwc-tab-panel>Tab Panel two</vwc-tab-panel>
<vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>
<style>
.tabs {
block-size: 150px;
}
</style>