Tabs

Svelte Component

Use tabs to quickly switch between different views.

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

A written or printed work consisting of pages glued or sewn together along one side and bound in covers.

A written or printed work consisting of pages glued or sewn together along one side and bound in covers.

Getting Started

Tabs utilize native radio groups to control state. Bind a shared group value, then provide a unique value per tab.

typescript 
let tabSet: number = 0;
html 
<TabGroup>
	<Tab bind:group={tabSet} name="tab1" value={0}>(label)</Tab>
	<Tab bind:group={tabSet} name="tab2" value={1}>(label)</Tab>
	<Tab bind:group={tabSet} name="tab3" value={2}>(label)</Tab>
</TabGroup>

Tab Panel Slot

You may optionally use the built-in panel slot. Use Svelte conditional blocks to display your active tab panel contents.

html 
<TabGroup>
	<!-- (list of tabs) --->

	<!-- Tab Panels --->
	<svelte:fragment slot="panel">
		{#if tabSet === 0}
			(tab panel 1 contents)
		{:else if tabSet === 1}
			(tab panel 2 contents)
		{:else if tabSet === 2}
			(tab panel 3 contents)
		{/if}
	</svelte:fragment>
</TabGroup>

Using Svelte Stores

You may optionally choose to use Svelte writable stores to control your tab group state. Note the use of the $ sign withing the bind:group property. Pair this with Skeleton's Local Storage Store for automatic persistence.

typescript 
import { writable, type Writable } from 'svelte/store';

const tabSet: Writable<number> = writable(0);
typescript 
<Tab bind:group={$tabSet} name="tab1" value={0}>(label)</Tab>