Form Layouts: Columns, Sections, Tabs, Wizards

Text Version of the Lesson

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