Filament is built on top of Laravel Livewire, providing seamless integration between Livewire components and Filament’s UI components. This page documents the Livewire integration points in Filament.
BasePage
The BasePage class is the foundation for all Filament pages and extends Livewire’s Component class.
Namespace
Inheritance
Extends: Livewire\Component
Implements: HasActions, HasRenderHookScopes, HasSchemas
Methods
render()
Render the Livewire component.
public function render(): View
Returns the component view with layout.
public function render(): View
{
return view($this->getView(), $this->getViewData())
->layout($this->getLayout(), [
'livewire' => $this,
'maxContentWidth' => $this->getMaxContentWidth(),
...$this->getLayoutData(),
]);
}
getView()
Get the view name for the component.
public function getView(): string
getLayout()
Get the layout view name.
public function getLayout(): string
Returns the layout view name.
getHeading()
Get the page heading.
public function getHeading(): string | Htmlable | null
Returns the page heading.
getSubheading()
Get the page subheading.
public function getSubheading(): string | Htmlable | null
Returns the page subheading.
getTitle()
Get the page title.
public function getTitle(): string | Htmlable
getMaxContentWidth()
Get the maximum content width for the page.
public function getMaxContentWidth(): Width | string | null
Returns the maximum content width.
getExtraBodyAttributes()
Get extra HTML attributes for the page body.
public function getExtraBodyAttributes(): array
Returns an array of HTML attributes.
Livewire Attributes
#[On(‘refresh-page’)]
The refresh event listener is automatically registered on all pages.
#[On('refresh-page')]
public function refresh(): void {}
// Dispatch from JavaScript
$dispatch('refresh-page')
// Dispatch from Livewire
$this->dispatch('refresh-page');
InteractsWithActions
Pages that implement HasActions use the InteractsWithActions trait, which provides Livewire methods for mounting and calling actions.
Key Methods
mountAction()
Mount an action modal.
public function mountAction(string $name, array $arguments = []): mixed
Arguments to pass to the action.
callMountedAction()
Execute the mounted action.
public function callMountedAction(): mixed
InteractsWithSchemas
Pages that implement HasSchemas use the InteractsWithSchemas trait, which provides Livewire integration for forms and schema components.
Key Methods
getSchemas()
Get all schemas registered on the component.
public function getSchemas(): array
Returns an array of schema instances.
getSchema()
Get a specific schema by name.
public function getSchema(?string $name = null): ?Schema
The schema name. Defaults to the default schema.
Returns the schema instance or null.
Livewire Properties
Protected Properties
$view
The view name for the component.
$heading
protected ?string $heading = null;
$subheading
protected ?string $subheading = null;
$maxContentWidth
protected Width | string | null $maxContentWidth = null;
Static Properties
$layout
protected static string $layout = 'filament-panels::components.layout.base';
$title
protected static ?string $title = null;
public static string | Alignment $formActionsAlignment = Alignment::Start;
public static bool $formActionsAreSticky = false;
$hasInlineLabels
public static bool $hasInlineLabels = false;
Wire Loading States
Filament components automatically integrate with Livewire’s wire:loading directive.
Example:
<div wire:loading>
Loading...
</div>
<div wire:loading.remove>
Content
</div>
Wire Model Binding
Filament form components automatically use Livewire’s wire:model directive for data binding.
Example:
use Filament\Forms\Components\TextInput;
TextInput::make('name')
->live() // Updates on every keystroke
->afterStateUpdated(fn ($state) => /* ... */);
Error Handling
Filament integrates with Livewire’s validation error handling.
public static ?Closure $reportValidationErrorUsing = null;