Support WireModel Your support ensures we remain accessible to all and continue spreading innovative ideas globally.

Support us

Relation Managers into form tabs using Livewire

Filament
Relation Managers into form tabs using Livewire

Details

Published

May 26, 2025

Last Update

May 26, 2025

Built with

Filament

Version

3.x

License

free

View on GitHub

Discussion

If you have any questions or suggestions about this example, feel free to open a discussion on GitHub

In Filament, Relation Managers are typically used to manage related models on resource pages. But there's a lesser-known trick: you can insert these Relation Managers directly into form tabs using Livewire. This lets you build more organized, user-friendly forms without sacrificing functionality.

Why put Relation Managers inside form tabs?

Instead of stacking everything on one long edit page, you can split the form into logical sections. Keep the main fields in one tab, and move related data—like categories, comments, or tags—to their own tabs. This keeps the UI clean and helps users stay focused.

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:

  • You're defining a form with three tabs.

  • The first contains the basic post fields.

  • The second and third embed the Categories and Comments relation managers as Livewire components.

Conclusion

Relation Managers are one of Filament's most powerful features. They offer a clean and modular way to handle related data, typically displayed in a dedicated section of the resource page. But by inserting them directly into form tabs, you unlock an alternative way to present those relationships — right inside the form itself.

©WireModel2025, All rights reserved.