Tabs

Introduction

Tabs organize content into multiple panels, reducing visible complexity:

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 2')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 3')
            ->schema([
                // ...
            ]),
    ])

string | Htmlable | Closure

The tabs container label.

array | Closure

An array of Tab components.

Default active tab

Set which tab is open by default:

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->activeTab(2)

int | Closure

default:"1"

The index of the active tab (1-based).

Tab icons

Add icons to tabs:

use Filament\Support\Icons\Heroicon;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->icon(Heroicon::Bell)
            ->schema([
                // ...
            ]),
    ])

string | BackedEnum | Htmlable | Closure

The icon to display.

Icon position

Control icon position:

use Filament\Support\Enums\IconPosition;

Tab::make('Notifications')
    ->icon(Heroicon::Bell)
    ->iconPosition(IconPosition::After)

IconPosition | Closure

default:"IconPosition::Before"

The icon position (Before or After).

Tab badges

Display badges on tabs:

Tab::make('Notifications')
    ->badge(5)

string | int | float | Closure

The badge content.

Badge color

Customize badge colors:

Tab::make('Notifications')
    ->badge(5)
    ->badgeColor('info')

string | array | Closure

The badge color.

Deferred badges

Load badges asynchronously for better performance:

Tabs::make('Tabs')
    ->key('notifications-tabs')
    ->tabs([
        Tab::make('Notifications')
            ->badge(static fn (): int => Notification::query()->where('unread', true)->count())
            ->deferBadge()
            ->schema([
                // ...
            ]),
    ])

The badge value must be from a closure when using deferBadge(). The Tabs component must have a key() set.

bool | Closure

default:"true"

Whether to defer badge loading.

Grid columns in tabs

Customize the grid within tabs:

Tab::make('Tab 1')
    ->schema([
        // ...
    ])
    ->columns(3)

int | array | Closure

The number of columns or responsive configuration.

Scrollable tabs

By default, tabs scroll horizontally. Disable scrolling:

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->scrollable(false)

When disabled, overflow tabs appear in a dropdown.

bool | Closure

default:"true"

Whether tabs are scrollable.

Vertical tabs

Render tabs vertically:

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->vertical()

bool | Closure

default:"false"

Whether to render tabs vertically.

Removing the container

Remove the styled container:

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->contained(false)

bool | Closure

default:"true"

Whether to use a container.

Persisting the active tab

In local storage

Persist the current tab in local storage:

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->persistTab()
    ->id('order-tabs')

bool | Closure

default:"true"

Whether to persist the tab.

string | Closure

A unique ID for the tabs (required for persistence).

In query string

Persist the current tab in the URL:

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->persistTabInQueryString()

Customize the query parameter:

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->persistTabInQueryString('settings-tab')

string | Closure

default:"'tab'"

The query string parameter name.

Form Components

Table Components

Layout Components

Infolist Components

Introduction

Default active tab

Tab icons

Icon position

Tab badges

Badge color

Deferred badges

Grid columns in tabs

Scrollable tabs

Vertical tabs

Removing the container

Persisting the active tab

In local storage

In query string

​Introduction

​Default active tab

​Tab icons

​Icon position

​Tab badges

​Badge color

​Deferred badges

​Grid columns in tabs

​Scrollable tabs

​Vertical tabs

​Removing the container

​Persisting the active tab

​In local storage

​In query string

Introduction

Default active tab

Tab icons

Icon position

Tab badges

Badge color

Deferred badges

Grid columns in tabs

Scrollable tabs

Vertical tabs

Removing the container

Persisting the active tab

In local storage

In query string