Studio
2

Tabs

Installation

pnpm dlx @mielui/svelte add tabs

Usage

Focusing a trigger selects its panel by default. SetactivationMode="manual" to move focus without loading a panel until Enter or Space is pressed. Arrow keys follow the tab orientation and document direction. Home and End move to the first and last enabled tabs.

If the selected trigger is removed, disabled, or changes value, selection moves to the first enabled trigger.onValueChange reports that value. With no enabled triggers, the value becomes an empty string. Focus stays on the current control. Hover highlights clear when their trigger is removed or disabled.

Inactive panels unmount. SetforceMount on a panel when it needs to keep its state while hidden.

import * as Tabs from '$lib/mielui/components/tabs';

let tab = $state('tab1');

<Tabs.Root bind:value={tab}>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Content 1</Tabs.Content>
  <Tabs.Content value="tab2">Content 2</Tabs.Content>
</Tabs.Root>

Examples

Default

Ghost

Segmented

Vertical

Set orientation="vertical" for a side-by-side layout. Use Up and Down Arrow to move between tabs; Home and End jump to the first and last tab.

Manual activation and retained state

Use arrow keys to focus a tab, then Enter or Space to select it. The Draft panel stays mounted with forceMount; History is disabled.

API reference

Tabs.Root

Manages active tab state.

Prop Type Default
activationMode "manual" | "automatic" | undefined 'automatic'
value Bindable string | undefined ''
onValueChange ((value: string) => void) | undefined —
orientation "horizontal" | "vertical" | undefined 'horizontal'
variant TabsVariant | undefined 'default'
class string | undefined —
children Snippet<[]> | undefined —

Tabs.Content

Renders a tab panel.

Prop Type Default
value Required string —
forceMount boolean | undefined false
class string | undefined —
children Snippet<[]> | undefined —

Tabs.List

Groups tab triggers.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

Tabs.Trigger

Selects a tab panel.

Prop Type Default
value Required string —
disabled boolean | undefined false
class string | undefined —
children Snippet<[]> | undefined —