Relation Managers into form tabs using Livewire
In Filament, Relation Managers are usually placed on Resource pages to handle related models. But here's a neat trick: you can embed these Relation Managers directly into form tabs using Livewire.
This approach helps you create cleaner, more structured forms without losing any of the interactive power Relation Managers provide.
Why put Relation Managers inside form tabs?
Long edit pages can become overwhelming when everything is stacked together. By moving related data like categories or comments into their own tabs, you:
- Keep the UI neat and focused.
- Provide a better user experience with logical grouping.
- Make it easier for users to find and edit what they need.
The trick
Filament allows you to insert Livewire components inside form schemas. Since Relation Managers are Livewire components under the hood, you can embed them directly into form tabs.
Let's say your Post Resource has two relations: Categories and Comments. Here's how you might organize your form:
public static function configure(Schema $schema): Schema
{
return $schema
->columns(null)
->components([
Tabs::make('Tabs')
->vertical()
->schema([
Tabs\Tab::make('Post'),
Tabs\Tab::make('Images'),
Tabs\Tab::make('Tags'),
Tabs\Tab::make('Status'),
Tabs\Tab::make('Categories')
->badge(fn (?Post $record, Get $get) => $record?->categories()?->count() ??
count($get('categories')))
->icon(Heroicon::OutlinedFolder)
->schema([
CheckboxList::make('categories')
->live()
->columns(2)
->relationship('categories', 'name')
->visibleOn(Operation::Create),
Livewire::make(CategoriesRelationManager::class, fn (Post $record) => [
'ownerRecord' => $record,
'pageClass' => EditPost::class,
])
->key('categories')
->visibleOn([Operation::Edit]),
]),
Tabs\Tab::make('Comments')
->badge(fn (?Post $record) => $record?->comments()?->count() ?? 0)
->icon(Heroicon::OutlinedChatBubbleLeftEllipsis)
->schema([
Livewire::make(CommentsRelationManager::class, fn (Post $record) => [
'ownerRecord' => $record,
'pageClass' => EditPost::class,
])
->key('comments'),
])
->visibleOn([Operation::Edit]),
]),
]);
}
Livewire::make(), don't forget to set a unique ->key() to each component.Conclusion
Relation Managers are one of Filament's most powerful features, typically shown in their own section. But embedding them into form tabs gives you a new way to present related data right inside your forms leading to a more modular and user-friendly experience.
Download source code
Run project on Firebase Studio
- Open studio.firebase.google.com and import the repository
https://github.com/wiremodel/simple-blog - Run the project. Once it's up, switch to the correct branch:
git checkout v4/relation-manager-form-tabs
Update dependencies and migrate the database:
composer update -W
php artisan migrate:fresh --seed
.env file has APP_URL set to the URL provided by Firebase Studio.