Skip to main content
You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.Looking for the current stable version? Visit the 5.x documentation.

​
Introduction

Some schemas can be long and complex. You may want to use tabs to reduce the number of components that are visible at once: 
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([
                // ...
            ]),
    ])
As well as allowing a static value, the make() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Setting the default active tab

The first tab will be open by default. You can change the default open tab using the activeTab() method: 
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([
                // ...
            ]),
    ])
    ->activeTab(2)
As well as allowing a static value, the activeTab() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Setting a tab icon

Tabs may have an icon, which you can set using the icon() method: 
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Support\Icons\Heroicon;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->icon(Heroicon::Bell)
            ->schema([
                // ...
            ]),
        // ...
    ])
As well as allowing a static value, the icon() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Setting the tab icon position

The icon of the tab may be positioned before or after the label using the iconPosition() method: 
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Support\Enums\IconPosition;
use Filament\Support\Icons\Heroicon;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->icon(Heroicon::Bell)
            ->iconPosition(IconPosition::After)
            ->schema([
                // ...
            ]),
        // ...
    ])
As well as allowing a static value, the iconPosition() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Setting a tab badge

Tabs may have a badge, which you can set using the badge() method: 
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->badge(5)
            ->schema([
                // ...
            ]),
        // ...
    ])
As well as allowing a static value, the badge() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.
If you’d like to change the color for a badge, you can use the badgeColor() method: 
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->badge(5)
            ->badgeColor('info')
            ->schema([
                // ...
            ]),
        // ...
    ])
As well as allowing a static value, the badgeColor() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Using grid columns within a tab

You may use the columns() method to customize the grid within the tab: 
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ])
            ->columns(3),
        // ...
    ])
As well as allowing a static value, the columns() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Disabling scrollable tabs

Tabs are rendered horizontally by default, and are scrollable when they exceed the available width. You may disable scrolling using the scrollable(false) method: 
use Filament\Schemas\Components\Tabs;

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->scrollable(false)
When tabs are not scrollable, the component automatically detects the available width. If not all tabs can fit, a dropdown button will appear. Any tabs that exceed the available width will be grouped inside this dropdown automatically.

​
Using vertical tabs

You can render the tabs vertically by using the vertical() method: 
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([
                // ...
            ]),
    ])
    ->vertical()
Optionally, you can pass a boolean value to the vertical() method to control if the tabs should be rendered vertically or not: 
use Filament\Schemas\Components\Tabs;

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->vertical(FeatureFlag::active())
As well as allowing a static value, the vertical() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Removing the styled container

By default, tabs and their content are wrapped in a container styled as a card. You may remove the styled container using contained(): 
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([
                // ...
            ]),
    ])
    ->contained(false)
As well as allowing a static value, the contained() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Persisting the current tab in the user’s session

By default, the current tab is not persisted in the browser’s local storage. You can change this behavior using the persistTab() method. You must also pass in a unique id() for the tabs component, to distinguish it from all other sets of tabs in the app. This ID will be used as the key in the local storage to store the current tab: 
use Filament\Schemas\Components\Tabs;

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->persistTab()
    ->id('order-tabs')
Optionally, the persistTab() method accepts a boolean value to control if the active tab should persist or not: 
use Filament\Schemas\Components\Tabs;

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->persistTab(FeatureFlag::active())
    ->id('order-tabs')
As well as allowing static values, the persistTab() and id() methods also accept functions to dynamically calculate them. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.

​
Persisting the current tab in the URL’s query string

By default, the current tab is not persisted in the URL’s query string. You can change this behavior using the persistTabInQueryString() method: 
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([
                // ...
            ]),
    ])
    ->persistTabInQueryString()
When enabled, the current tab is persisted in the URL’s query string using the tab key. You can change this key by passing it to the persistTabInQueryString() method: 
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([
                // ...
            ]),
    ])
    ->persistTabInQueryString('settings-tab')
As well as allowing a static value, the persistTabInQueryString() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.
Learn more about utility injection.
Component
$component
Filament\Schemas\Components\Component
The current component instance.
Get function
$get
Filament\Schemas\Components\Utilities\Get
A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire
$livewire
Livewire\Component
The Livewire component instance.
Eloquent model FQN
$model
?string<Illuminate\Database\Eloquent\Model>
The Eloquent model FQN for the current schema.
Operation
$operation
string
The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record
$record
?Illuminate\Database\Eloquent\Model
The Eloquent record for the current schema.
Edit this page on GitHub

Sponsored by

KirschbaumMailtrapCMS MaxAgiledropBaiz.aiSerpApi