Tabs

Accessible tabs (APG tabs): role=tablist/tab/tabpanel, roving tabindex — one tab in the tab order, arrows move between them — and automatic activation, which is the APG default for cheap panels.

Panels come in as a snippet per value, so only the selected one renders:

<Tabs tabs={[{ value: 'a', label: 'Overview' }]} bind:value>
  {#snippet panel(v)}
    {#if v === 'a'}…{/if}
  {/snippet}
</Tabs>

Navigation · two-way: bind:value · keyboard contract

<script lang="ts">
	import { Tabs } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
tabs required	Tab[]	—	In render order; a disabled tab is skipped by the arrow keys.
value bind:	string	—	The selected tab's value. Defaults to the first enabled tab.
class	string	—	Merged with the component's own classes, last — so yours win.
aria-label	string	—	Names the tablist for assistive tech.
onValueChange	(value: string) => void	—	Fires whenever the selection moves, including via the arrows.
panel required	Snippet<[string]>	—	Renders the selected panel's content.

Types

export type Tab = {
	/** The selected tab's value. Defaults to the first enabled tab. */
	value: string;
	label: string;
	disabled?: boolean;
};

Keyboard

Key	Does
← / →	move between tabs, selecting as you go
Home / End	first / last tab
Tab	leave the tablist for the panel — one tab stop, not one per tab

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Tabs
	tabs={[
		{ value: 'overview', label: 'Overview' },
		{ value: 'files', label: 'Files' },
		{ value: 'settings', label: 'Settings' }
	]}
	value="overview"
	aria-label="Volume sections"
>
	{#snippet panel(v)}
		{#if v === 'overview'}
			<p class="text-muted-foreground text-sm">2.56M files · 527 GB indexed.</p>
		{/if}
	{/snippet}
</Tabs>

Navigation · Tree · Pagination · CommandPalette · Kbd

---

← All components · Getting started · Theming · source