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

Bottom Navigation

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>