Courses

Filament 3 From Scratch: Practical Course

Form Layouts: Columns, Sections, Tabs, Wizards

Summary of this lesson:
- Customizing form layouts with columns
- Using sections and fieldsets to group fields
- Implementing tabs and wizard steps
- Managing column spans and responsive layouts

In this lesson, let's explore different options for changing the layout of the form input fields and grouping them in various ways.

Interestingly, similar layout concepts may be reusable in the future, not only for the forms but for other elements on the Filament pages.

I will remind you how our Create Product form looks now in a default Filament layout:

Let's change the way it looks.


Divide the Form into Columns

By default, all forms are divided into two columns.

But what if you want it all vertically in one column?

app/Filament/Resources/ProductResource.php:

return $form
->schema([
// ... all the columns
])
->columns(1);

Here's the result:

Or maybe it's better the other way around, all in one row? We have four fields, so let's put this into a parameter:

app/Filament/Resources/ProductResource.php:

return $form
->schema([
// ... all the columns
])
->columns(4);

This is how the form looks now:

Not only that, you can add a columnSpan() to individual fields of the form.

A typical example is a bigger input like Textarea or RichEditor:

return $form
->schema([
Forms\Components\TextInput::make('name')
->required()
->unique(ignoreRecord: true),
Forms\Components\TextInput::make('price')
->required(),
Forms\Components\RichEditor::make('description')
->columnSpan(2)
->required(),
Forms\Components\Radio::make('status')
->options(self::$statuses),
Forms\Components\Select::make('category_id')
->relationship('category', 'name'),
]);

Then it takes two columns, i.e., the full width:

Another syntax option for a field...

The full lesson is only for Premium Members.
Want to access all 24 lessons of this course? (101 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord