Layout

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:

Component::make()
->schema([
// ...
])

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

Component::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.

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

Component::make()->id('main-card')

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

Component::make()->extraAttributes(['step' => 10])

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)

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)

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,
]),
// ...
])

Placeholder

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

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

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()

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([
// ...
]),
])

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')

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.

Extend the Filament\Forms\Components\Component class, and define the $view path of the custom component:

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

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