Layout

Getting started

Layout component classes can be found in the Filament\Form\Components namespace.

They reside within the schema of your form, alongside any fields:

protected function getFormSchema(): array
{
return [
// ...
];
}

Components may be created using the static make() method. Usually, you will then define the child component schema() to display inside:

use Filament\Forms\Components\Grid;
 
Grid::make()
->schema([
// ...
])

Columns

You may create multiple columns within each layout component using the columns() method:

use Filament\Forms\Components\Card;
 
Card::make()->columns(2)

For more information about creating advanced, responsive column layouts, please see the grid section. All column options in that section are also available in other layout components.

Setting an ID

You may define an ID for the component using the id() method:

use Filament\Forms\Components\Card;
 
Card::make()->id('main-card')

Custom attributes

The HTML of components can be customized even further, by passing an array of extraAttributes():

use Filament\Forms\Components\Card;
 
Card::make()->extraAttributes(['class' => 'bg-gray-50'])

Grid

Generally, form fields are stacked on top of each other in one column. To change this, you may use a grid component:

use Filament\Forms\Components\Grid;
 
Grid::make()
->schema([
// ...
])

By default, grid components will create a two column grid for the Tailwind md breakpoint and higher.

To customize the number of columns in any grid at different breakpoints, you may pass an array of breakpoints and columns:

use Filament\Forms\Components\Grid;
 
Grid::make([
'default' => 1,
'sm' => 2,
'md' => 3,
'lg' => 4,
'xl' => 6,
'2xl' => 8,
])
->schema([
// ...
])

Since Tailwind is mobile-first, if you leave out a breakpoint, it will fall back to the one set below it:

use Filament\Forms\Components\Grid;
 
Grid::make([
'sm' => 2,
'xl' => 6,
])
->schema([
// ...
])

You may specify the number of columns that any component may span, at any breakpoint in an identical way:

use Filament\Forms\Components\Grid;
use Filament\Forms\Components\TextInput;
 
Grid::make([
'default' => 1,
'sm' => 3,
'xl' => 6,
'2xl' => 8,
])
->schema([
TextInput::make('name')
->columnSpan([
'sm' => 2,
'xl' => 3,
'2xl' => 4,
]),
// ...
])

Additionally, you can use custom HTML classes, e.g. hidden to hide the column altogether:

use Filament\Forms\Components\Grid;
use Filament\Forms\Components\TextInput;
 
Grid::make([
'default' => 1,
'sm' => 3
])
->schema([
TextInput::make('name')->columnSpan(2),
TextInput::make('email'),
Hidden::make('secret')->columnSpan('hidden'),
// ...
])

Fieldset

You may want to group fields into a Fieldset. Each fieldset has a label, a border, and a two-column grid by default:

use Filament\Forms\Components\Fieldset;
 
Fieldset::make('Label')
->schema([
// ...
])

You may use the columns() method to customize the grid within the fieldset:

use Filament\Forms\Components\Fieldset;
 
Fieldset::make('Label')
->schema([
// ...
])
->columns(3)

Tabs

Some forms can be long and complex. You may want to use tabs to reduce the number of components that are visible at once:

use Filament\Forms\Components\Tabs;
 
Tabs::make('Heading')
->tabs([
Tabs\Tab::make('Label 1')
->schema([
// ...
]),
Tabs\Tab::make('Label 2')
->schema([
// ...
]),
Tabs\Tab::make('Label 3')
->schema([
// ...
]),
])

Section

You may want to separate your fields into sections, each with a heading and description. To do this, you can use a section component:

use Filament\Forms\Components\Section;
 
Section::make('Heading')
->description('Description')
->schema([
// ...
])

You may use the columns() method to easily create a grid within the section:

use Filament\Forms\Components\Section;
 
Section::make('Heading')
->schema([
// ...
])
->columns(2)

Sections may be collapsible() to optionally hide content in long forms:

use Filament\Forms\Components\Section;
 
Section::make('Heading')
->schema([
// ...
])
->collapsible()

Your sections may be collapsed() by default:

use Filament\Forms\Components\Section;
 
Section::make('Heading')
->schema([
// ...
])
->collapsed()

Placeholder

Placeholders can be used to render text-only "fields" within your forms. Each placeholder has content(), which cannot be changed by the user.

use Filament\Forms\Components\Placeholder;
 
Placeholder::make('Label')
->content('Content, displayed underneath the label')

You may even render custom HTML within placeholder content:

use Filament\Forms\Components\Placeholder;
use Illuminate\Support\HtmlString;
 
Placeholder::make('Documentation')
->content(new HtmlString('<a href="https://filamentadmin.com/docs">filamentadmin.com</a>'))

Card

The card component may be used to render the form components inside a card:

use Filament\Forms\Components\Card;
 
Card::make()
->schema([
// ...
])

You may use the columns() method to easily create a grid within the card:

use Filament\Forms\Components\Card;
 
Card::make()
->schema([
// ...
])
->columns(2)

View

Aside from building custom layout components, you may create "view" components which allow you to create custom layouts without extra PHP classes.

use Filament\Forms\Components\View;
 
View::make('filament.forms.components.wizard')

Inside your view, you may render the component's schema() using the $getChildComponentContainer() closure:

<div>
{{ $getChildComponentContainer() }}
</div>

Building custom layout components

You may create your own custom component classes and views, which you can reuse across your project, and even release as a plugin to the community.

If you're just creating a simple custom component to use once, you could instead use a view component to render any custom Blade file.

To create a custom column class and view, you may use the following command:

php artisan make:form-layout Wizard

This will create the following layout component class:

use Filament\Forms\Components\Component;
 
class Wizard extends Component
{
protected string $view = 'filament.forms.components.wizard';
 
public static function make(): static
{
return new static();
}
}

Inside your view, you may render the component's schema() using the $getChildComponentContainer() closure:

<div>
{{ $getChildComponentContainer() }}
</div>

Still need help? Join our Discord community or open a GitHub discussion

Enjoying Filament?

We are open source at heart. To allow us to build new features, fix bugs, and run the community, we require your financial support.

Sponsor Filament on GitHub