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="{f:constant(name: 'Jramke\FluidPrimitives\Enum\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="{f:constant(name: 'Jramke\FluidPrimitives\Enum\TabsActivationMode::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>

API Reference

The following tables cover the available props of the Fluid Primitives. For a full list of available client side props and methods, see the Zag.js Machine API.

tabs.root

Provides shared tabs state and wraps the tab list and panels. Renders a <div> element.

Name	Description	Required	Default
`loopFocus`	`boolean` Whether the keyboard navigation will loop from last tab to first, and vice versa.	No	true
`defaultValue`	`string` The initial selected tab value when rendered. Use when you don't need to control the selected tab value.	No	-
`orientation`	`Enum\Orientation` The orientation of the tabs.	No	Horizontal
`activationMode`	`Enum\TabsActivationMode` The activation mode of the tabs.	No	Automatic
`composite`	`boolean` Whether the tab is composite.	No	true
`deselectable`	`boolean` Whether the active tab can be deselected when clicking on it.	No	-

tabs.list

Groups the tab triggers. Renders a <div> element.

tabs.trigger

Activates a tab and focuses its panel. Renders a <button> element.

Name	Description	Required	Default
`value`	`string` The value of the tab.	Yes	-
`disabled`	`boolean` Whether the tab is disabled.	No	-

tabs.indicator

Displays the active tab indicator. Renders a <div> element.

tabs.content

Displays the panel content for a tab. Renders a <div> element.

Name	Description	Required	Default
`value`	`string` The value of the tab.	Yes	-

Anatomy

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