mielui
Navigation

Tabs

A horizontal or vertical switcher for views that share a context. Comes in three variants.

Installation

pnpm dlx @mielui/svelte add tabs

Usage

Bind value on Root to the selected tab. Each Trigger's value matches the Content panel it shows. When value matches no enabled trigger, the first enabled trigger is selected and onValueChange reports it.

<script lang="ts">
    import * as Tabs from '@mielui/svelte/components/tabs';

    let tab = $state('account');
</script>

<Tabs.Root bind:value={tab}>
    <Tabs.List>
        <Tabs.Trigger value="account">Account</Tabs.Trigger>
        <Tabs.Trigger value="password">Password</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="account">Account settings</Tabs.Content>
    <Tabs.Content value="password">Password settings</Tabs.Content>
</Tabs.Root>

Arrow keys move between tabs along the orientation and wrap at the ends. Home and End jump to the first and last enabled tab. Focusing a tab selects it unless activationMode is manual. Inactive panels unmount unless their Content sets forceMount. Give List an aria-label when nothing nearby names the tabs.

Examples

Panels

Each tab shows its own panel. A grid on List stretches the tabs to full width.

Default

Ghost

Segmented

Vertical

orientation="vertical" stacks the tabs beside the panel. Up and Down Arrow move between them.

Manual activation and kept state

With activationMode="manual", arrow keys move focus and Enter or Space selects. The Draft panel sets forceMount, so its input keeps its text while hidden. History is disabled.

API reference

Tabs.Root

Manages active tab state.

  • activationMode
    "automatic" | "manual"

    automatic selects a tab on focus. manual waits for Enter or Space.

    Default 'automatic'

  • value Bindable
    string

    Selected tab. Bindable.

    Default ''

  • onValueChange
    ((value: string) => void)

    Called with the new value when it changes.

  • orientation
    "horizontal" | "vertical"

    Direction of the tab list. It also sets which arrow keys move between tabs.

    Default 'horizontal'

  • variant
    TabsVariant

    Style of the tab list.

    Default 'default'

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

Tabs.Content

Renders a tab panel.

  • value Required
    string

    Identifies the panel. It matches a trigger's value.

  • forceMount
    boolean

    Keeps the panel mounted while hidden, so its state survives.

    Default false

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

Tabs.List

Groups tab triggers.

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

  • id
    string

    Id of the tab list element.

  • aria-label
    string

    Accessible name for the tab list.

  • aria-labelledby
    string

    Id of the element that names the tab list.

Tabs.Trigger

Selects a tab panel.

  • value Required
    string

    Identifies the tab. It matches a panel's value.

  • disabled
    boolean

    Prevents interaction and dims the control.

    Default false

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.