Tabs

A component for toggling between related panels on the same page.

Manage your account settings and preferences.

<ui:tabs.root defaultValue="tab1">
    <ui:tabs.list class="mb-3">
        <ui:tabs.trigger value="tab1">Account</ui:tabs.trigger>
        <ui:tabs.trigger value="tab2">Password</ui:tabs.trigger>
        <ui:tabs.trigger value="tab3">Settings</ui:tabs.trigger>
    </ui:tabs.list>
    <ui:tabs.content value="tab1">
        <div class="aspect-video w-84 rounded-md border-dashed border p-4 text-sm grid place-items-center text-center">
            Manage your account settings and preferences.
        </div>
    </ui:tabs.content>
    <ui:tabs.content value="tab2">
        <div class="aspect-video w-84 rounded-md border-dashed border p-4 text-sm grid place-items-center text-center">
            Change your password and other security options.
        </div>
    </ui:tabs.content>
    <ui:tabs.content value="tab3">
        <div class="aspect-video w-84 rounded-md border-dashed border p-4 text-sm grid place-items-center text-center">
            Configure your application settings and preferences.
        </div>
    </ui:tabs.content>
</ui:tabs.root>

import { mount } from 'fluid-primitives';
import { Tabs } from 'fluid-primitives/tabs';

mount('tabs', ({ props }) => {
	const tabs = new Tabs(props);
	tabs.init();
	return tabs;
});

Features

Full keyboard navigation support with arrow keys
Supports horizontal and vertical orientations
Supports automatic and manual tab activation modes
Content is lazy mounted by default
Supports disabled tabs

Installation

typo3 ui:add tabs

Read more about installing Components and Primitives.

Examples

Vertical Orientation

Display tabs in a vertical layout.

Manage your account settings and preferences.

<ui:tabs.root defaultValue="tab1" orientation="vertical" class="flex gap-4">
    <ui:tabs.list class="flex-col h-auto items-end">
        <ui:tabs.trigger value="tab1">Account</ui:tabs.trigger>
        <ui:tabs.trigger value="tab2">Password</ui:tabs.trigger>
        <ui:tabs.trigger value="tab3">Settings</ui:tabs.trigger>
    </ui:tabs.list>
    <div class="flex-1">
        <ui:tabs.content value="tab1">
            <div class="aspect-video w-84 rounded-md border-dashed border p-4 text-sm grid place-items-center text-center">
                Manage your account settings and preferences.
            </div>
        </ui:tabs.content>
        <ui:tabs.content value="tab2">
            <div class="aspect-video w-84 rounded-md border-dashed border p-4 text-sm grid place-items-center text-center">
                Change your password and other security options.
            </div>
        </ui:tabs.content>
        <ui:tabs.content value="tab3">
            <div class="aspect-video w-84 rounded-md border-dashed border p-4 text-sm grid place-items-center text-center">
                Configure your application settings and preferences.
            </div>
        </ui:tabs.content>
    </div>
</ui:tabs.root>

Disabled Tabs

Disable specific tabs to prevent interaction.

First tab content.

<ui:tabs.root defaultValue="tab1">
    <ui:tabs.list class="mb-3">
        <ui:tabs.trigger value="tab1">Enabled 1</ui:tabs.trigger>
        <ui:tabs.trigger value="tab2" disabled="{true}">Disabled</ui:tabs.trigger>
        <ui:tabs.trigger value="tab3">Enabled 2</ui:tabs.trigger>
    </ui:tabs.list>
    <ui:tabs.content value="tab1">First tab content.</ui:tabs.content>
    <ui:tabs.content value="tab2">This tab is disabled.</ui:tabs.content>
    <ui:tabs.content value="tab3">Third tab content.</ui:tabs.content>
</ui:tabs.root>

Manual Activation

Require pressing Enter or Space to activate tabs instead of activating on focus.

Press Enter to switch tabs.

<ui:tabs.root defaultValue="tab1" activationMode="manual">
    <ui:tabs.list class="mb-3">
        <ui:tabs.trigger value="tab1">Tab 1</ui:tabs.trigger>
        <ui:tabs.trigger value="tab2">Tab 2</ui:tabs.trigger>
        <ui:tabs.trigger value="tab3">Tab 3</ui:tabs.trigger>
    </ui:tabs.list>
    <ui:tabs.content value="tab1">Press Enter to switch tabs.</ui:tabs.content>
    <ui:tabs.content value="tab2">Content for tab 2.</ui:tabs.content>
    <ui:tabs.content value="tab3">Content for tab 3.</ui:tabs.content>
</ui:tabs.root>

Anatomy

<primitives:tabs.root>
    <primitives:tabs.list>
        <primitives:tabs.trigger />
        <primitives:tabs.indicator />
    </primitives:tabs.list>
    <primitives:tabs.content />
</primitives:tabs.root>