Svelte Component

Tabs

Use tabs to quickly switch between different views.

typescript 
import { TabGroup, Tab } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

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

Tabs utilize native radio groups to control state. Bind a shared group value, then provide a unique value per tab. Please note that using the panel slot is optional.

Justify

Use the justify property to adjust tab positions.

Navigation

Tabs make a good choice for custom navigation bars alongside an App Shell or within a page, and has flexible styling.

Using Svelte Stores

You may optionally choose to use Svelte writable stores to control your tab group state. Note the use of the $ sign within 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>