Filament v3 Custom Field Plugins Deep Dive | Mohamed Said [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ ](https://github.com/EG-Mohamed) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ home ](https://msaied.com) [ articles ](https://msaied.com/articles) Filament v3 Custom Field Plugins: Building Reusable Inputs with Full Form Integration On this page 1. [ Why Roll Your Own Filament Field? ](#why-roll-your-own-filament-field) 2. [ The Field Contract ](#the-field-contract) 3. [ The Blade View and Alpine Wiring ](#the-blade-view-and-alpine-wiring) 4. [ Alpine Component Definition ](#alpine-component-definition) 5. [ Service Provider and Asset Registration ](#service-provider-and-asset-registration) 6. [ Testing the Field with Pest ](#testing-the-field-with-pest) 7. [ Takeaways ](#takeaways) ![Filament v3 Custom Field Plugins: Building Reusable Inputs with Full Form Integration](https://cdn.msaied.com/547/a61037a8f397f843359f1438d70c8bc5.png) #filament #laravel #livewire #alpine Filament v3 Custom Field Plugins: Building Reusable Inputs with Full Form Integration ======================================================================================= 14 Aug 2026 3 min read ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said Table of contents 1. [ 01 Why Roll Your Own Filament Field? ](#why-roll-your-own-filament-field) 2. [ 02 The Field Contract ](#the-field-contract) 3. [ 03 The Blade View and Alpine Wiring ](#the-blade-view-and-alpine-wiring) 4. [ 04 Alpine Component Definition ](#alpine-component-definition) 5. [ 05 Service Provider and Asset Registration ](#service-provider-and-asset-registration) 6. [ 06 Testing the Field with Pest ](#testing-the-field-with-pest) 7. [ 07 Takeaways ](#takeaways) Why Roll Your Own Filament Field? --------------------------------- Filament ships with a rich field library, but real projects inevitably need inputs the core doesn't cover — a color-swatch picker, a signature pad, a tag tokenizer backed by a custom API. Reaching for a third-party package every time creates version-lock risk. Understanding the field contract lets you build something maintainable, testable, and publishable as your own package. This article walks through building a `ColorSwatchField` — simple enough to follow, complex enough to demonstrate every integration point. --- The Field Contract ------------------ Every Filament field extends `Filament\Forms\Components\Field`, which itself extends `Component`. The minimum surface you must understand: - **`setUp()`** — configure default state, rules, and callbacks. - **`getView()`** — return the Blade view string. - **State hydration/dehydration** — how Livewire round-trips your value. ```php namespace Acme\ColorSwatch; use Filament\Forms\Components\Field; class ColorSwatchField extends Field { protected string $view = 'color-swatch::color-swatch-field'; protected array $swatches = []; protected function setUp(): void { parent::setUp(); $this->default(null); $this->rule('nullable'); $this->rule('string'); $this->rule('max:7'); // #RRGGBB } public function swatches(array $colors): static { $this->swatches = $colors; return $this; } public function getSwatches(): array { return $this->swatches; } } ``` The fluent `swatches()` method follows Filament's own builder pattern. Returning `static` keeps it chainable in form schemas. --- The Blade View and Alpine Wiring -------------------------------- Filament fields render inside a Livewire component. Your view receives `$getState()`, `$setState()`, and `$getId()` as injected closures via the `@php` block Filament provides. ```blade ``` The critical line is `$applyStateBindingModifiers("entangle('{$getStatePath()}')")`. This is Filament's own helper — it respects deferred/lazy binding modes the form author may have configured, so your field behaves consistently with native fields. --- Alpine Component Definition --------------------------- Keep JS in a dedicated file loaded via your service provider's `$this->callAfterResolving` or a Vite entrypoint: ```javascript // resources/js/color-swatch.js document.addEventListener('alpine:init', () => { Alpine.data('colorSwatch', ({ state, swatches }) => ({ state, swatches, init() { this.$watch('state', val => { // Sync back if needed; entangle handles Livewire side }); }, })); }); ``` --- Service Provider and Asset Registration --------------------------------------- ```php public function packageBooted(): void { // Using spatie/laravel-package-tools Filament::serving(function () { Filament::registerRenderHook( PanelsRenderHook::HEAD_END, fn () => Blade::render( '' ) ); }); } ``` Publish the compiled JS via `php artisan vendor:publish --tag=color-swatch-assets` — keep the asset pipeline outside your package's Vite config so consumers don't inherit your build tooling. --- Testing the Field with Pest --------------------------- ```php use Filament\Forms\ComponentContainer; use Acme\ColorSwatch\ColorSwatchField; it('stores a valid hex color', function () { $field = ColorSwatchField::make('brand_color') ->swatches(['#FF0000', '#00FF00']); $container = ComponentContainer::make(TestForm::make()) ->components([$field]) ->fill(['brand_color' => '#FF0000']); expect($container->getState()['brand_color'])->toBe('#FF0000'); }); ``` `ComponentContainer` lets you unit-test field state without booting a full Livewire component — fast and isolated. --- Takeaways --------- - Extend `Field`, implement `getView()`, and use `setUp()` for defaults and validation rules. - Use `$applyStateBindingModifiers` with `entangle` — never hardcode `wire:model`. - Scope Alpine components with `Alpine.data()` to avoid global namespace collisions. - Register assets via `Filament::serving()` so they only load inside Filament panels. - Test with `ComponentContainer::make()` for fast, isolated field unit tests. Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fmsaied.com%2Farticles%2Ffilament-v3-custom-field-plugins-building-reusable-inputs-with-full-form-integration&text=Filament+v3+Custom+Field+Plugins%3A+Building+Reusable+Inputs+with+Full+Form+Integration) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmsaied.com%2Farticles%2Ffilament-v3-custom-field-plugins-building-reusable-inputs-with-full-form-integration) Frequently Asked Questions ---------------------------- 3 questions Q01 Can I use the same custom field in both Filament v3 panels and standalone Livewire forms? Filament fields are tightly coupled to Filament's ComponentContainer and state management. For standalone Livewire forms you would need to extract the Alpine component and Blade partial separately; the PHP Field class itself won't work outside a Filament form context. Q02 How do I handle dehydration for complex values like arrays or objects? Override `dehydrateState(array &$state): void` and `hydrateState(array &$state): void` on your Field subclass. Cast to/from JSON strings there, and add a matching Eloquent cast on the model so the database layer stays clean. Q03 Should I use Filament's built-in asset management or a separate Vite build? For a distributable package, compile your JS to a plain IIFE and publish it as a static vendor asset. Consumers shouldn't need to add your package to their Vite config. Reserve Vite integration for internal monorepo packages where you control the build pipeline. Continue reading More Articles --------------- [ View all ](https://msaied.com/articles) [ ![PostgreSQL Window Functions in Laravel: Ranking, Running Totals, and Gap Detection](https://cdn.msaied.com/546/f045f6411aa801b18d8a06d0518d540a.png) laravel postgresql sql ### PostgreSQL Window Functions in Laravel: Ranking, Running Totals, and Gap Detection Window functions let you compute rankings, running totals, and gaps directly in SQL without self-joins or PHP... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 14 Aug 2026 4 min read Read ](https://msaied.com/articles/postgresql-window-functions-in-laravel-ranking-running-totals-and-gap-detection-1) [ ![Event Sourcing in Laravel: Aggregates, Projectors, and Reactors Without the Ceremony](https://cdn.msaied.com/545/14148532753288225b142923e6704a4d.png) laravel event-sourcing ddd ### Event Sourcing in Laravel: Aggregates, Projectors, and Reactors Without the Ceremony Event sourcing sounds academic until you need a full audit trail or time-travel debugging in production. This... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 13 Aug 2026 4 min read Read ](https://msaied.com/articles/event-sourcing-in-laravel-aggregates-projectors-and-reactors-without-the-ceremony) [ ![Read/Write Splitting, Connection Pooling, and Sticky Reads in Laravel](https://cdn.msaied.com/543/97ef3abac42d00989679f44916e2efd5.png) laravel database postgresql ### Read/Write Splitting, Connection Pooling, and Sticky Reads in Laravel Learn how Laravel's database layer handles read/write splitting, when sticky reads save you from replication l... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 13 Aug 2026 4 min read Read ](https://msaied.com/articles/readwrite-splitting-connection-pooling-and-sticky-reads-in-laravel-6) [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. Explore - [Home](https://msaied.com) - [Projects](https://msaied.com/projects) - [Articles](https://msaied.com/articles) - [Certificates](https://msaied.com/certificates) - [Contact](https://msaied.com#contact-section) Connect - [ hello@msaied.com ](mailto:hello@msaied.com) - [ +20 109 461 9204 ](tel:+201094619204) © 2026 Mohamed Said. All rights reserved. [ ](https://github.com/EG-Mohamed) [ ](https://www.linkedin.com/in/msaiedm/) [ ](https://wa.me/201094619204) [ ](mailto:hello@msaied.com) [ ](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)