Tabs

Tabs organize related content into separate panels that share the same space, letting users switch between views without leaving the page. Reach for it when a section has a few peer views (settings groups, dashboards, detail panels) that are mutually exclusive. Keyboard support and roving focus come from the primitive underneath. Anatomy: Tabs (root, owns the selected value) wraps a TabsList of TabsTrigger buttons and one TabsContent panel per trigger, matched by their shared value.

Panels

value ties a trigger to its panel. The list is a field, not a card — the same well an Input sits in — so the active tab steps off the track it lives in and takes bg-selected, the treatment every chosen thing in the system wears.

Store name, contact address and default currency.

Disabled trigger

A disabled trigger is skipped by arrow-key navigation rather than focused and refused. Reach for it only where the panel genuinely cannot be reached yet.

Payout opens once the first order settles.

Manual activation

activationMode="manual" waits for Enter or Space instead of switching on focus. Use it when a panel costs something to open — a fetch, a chart, a form that resets — so arrowing past it does not fire that off four times.

Each report is fetched only once its tab is activated.

API

Tabs

Tabs organize related content into separate panels that share the same space, letting users switch between views without leaving the page. Reach for it when a section has a few peer views (settings groups, dashboards, detail panels) that are mutually exclusive. Keyboard support and roving focus come from the primitive underneath. Anatomy: Tabs (root, owns the selected value) wraps a TabsList of TabsTrigger buttons and one TabsContent panel per trigger, matched by their shared value.

Prop Type Default Description
children required import('svelte').Snippet

The TabsList and TabsContent panels.

value bindable string

The value of the currently active tab. Bindable — pass a value to control selection, or bind to read it. Matches the value of a TabsTrigger/TabsContent pair.

class string

Extra Tailwind classes merged onto the root element (a vertical flex column with gap by default).

orientation 'horizontal'|'vertical'

Layout and arrow-key navigation direction of the tab list (forwarded via ...rest).

activationMode 'automatic'|'manual'

automatic selects a tab as soon as it receives focus; manual requires Enter/Space to activate (forwarded via ...rest).

loop boolean

When true, arrow-key focus wraps from the last trigger back to the first (forwarded via ...rest).

disabled boolean

Disables the whole tab set (forwarded via ...rest).

TabsList

Container that groups the TabsTrigger buttons of a Tabs root into the pill-shaped bar used to switch between panels.

Prop Type Default Description
children required import('svelte').Snippet

The TabsTrigger buttons.

class string

Additional Tailwind classes merged onto the list container.

TabsTrigger

A single clickable tab within a TabsList. Its value must match the value of the TabsContent panel it controls.

Prop Type Default Description
children required import('svelte').Snippet

Trigger label/content.

value required string

Identifies which TabsContent panel this trigger activates.

class string

Additional Tailwind classes merged onto the trigger.

disabled boolean

Disables this trigger (forwarded via ...rest); skipped during keyboard navigation and dimmed via data-disabled styling.

TabsContent

The panel shown when its value matches the active tab set on the Tabs root.

Prop Type Default Description
children required import('svelte').Snippet

Panel content.

value required string

Matches the value of the TabsTrigger that reveals this panel.

class string

Additional Tailwind classes merged onto the panel.