Filament v3 Custom Field Plugins Deep Dive | Mohamed Said [Skip to content](#main) [ ![](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed SaidLaravel Backend Engineer ](https://www.msaied.com/public) - [Home](https://www.msaied.com/public) - [Projects](https://www.msaied.com/public/projects) - [Articles](https://www.msaied.com/public/articles) - [Certificates](https://www.msaied.com/public/certificates) - [About](https://www.msaied.com/public#about) [ Contact](https://www.msaied.com/public#contact) Menu Menu ---- Close - [HomeStart here](https://www.msaied.com/public) - [ProjectsCase studies](https://www.msaied.com/public/projects) - [ArticlesEngineering notes](https://www.msaied.com/public/articles) - [CertificatesCredentials](https://www.msaied.com/public/certificates) - [AboutHow I work](https://www.msaied.com/public#about) - [ContactGet in touch](https://www.msaied.com/public#contact) [Start a conversation](https://www.msaied.com/public#contact) [WhatsApp](https://wa.me/201094619204) [Email](mailto:hello@msaied.com) 1. [Home](https://www.msaied.com/public) 2. / 3. [Articles](https://www.msaied.com/public/articles) 4. / 5. Filament v3 Custom Field Plugins: Building Reusable Inputs with Full Form Integration Filament v3 Custom Field Plugins: Building Reusable Inputs with Full Form Integration ====================================================================================== Learn how to build a production-ready Filament v3 custom field plugin — covering the Field contract, state hydration, Alpine.js wiring, and packaging it for reuse across projects. ![](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) [Mohamed Said](https://www.msaied.com/public#person) Published 14 Aug 2026 · Updated 14 Aug 2026 · 3 min read ShareCopy linkCopied ![Filament v3 Custom Field Plugins: Building Reusable Inputs with Full Form Integration](https://cdn.msaied.com/547/a61037a8f397f843359f1438d70c8bc5.png) 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) 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. - [filament](https://www.msaied.com/public/articles?search=filament) - [laravel](https://www.msaied.com/public/articles?search=laravel) - [livewire](https://www.msaied.com/public/articles?search=livewire) - [alpine](https://www.msaied.com/public/articles?search=alpine) Frequently asked questions --------------------------- 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. 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. 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. ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp)About the author ---------------- [Mohamed Said](https://www.msaied.com/public#person)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. [About](https://www.msaied.com/public#about) [GitHub ↗](https://github.com/EG-Mohamed) [LinkedIn ↗](https://www.linkedin.com/in/msaiedm/) [WhatsApp ↗](https://wa.me/201094619204) [Email Address ↗](mailto:hello@msaied.com) [My CV ↗](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view) [Previous articlePostgreSQL Window Functions in Laravel: Ranking, Running Totals, and Gap Detection](https://www.msaied.com/public/articles/postgresql-window-functions-in-laravel-ranking-running-totals-and-gap-detection-1) [Next articleContextual DTOs and Value Objects in Laravel Without the Bloat](https://www.msaied.com/public/articles/contextual-dtos-and-value-objects-in-laravel-without-the-bloat) 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) ### Have a technical challenge? Tell me what you’re building. I reply within two working days. [Start a conversation](https://www.msaied.com/public#contact) Related articles ----------------- [ ![](https://cdn.msaied.com/740/cce86edc21eddcbdd2f2454fadaf9c70.png) · 3 min read### The Pipeline Pattern in Laravel: Custom Pipelines Beyond Middleware 5 Oct 2026 ](https://www.msaied.com/public/articles/the-pipeline-pattern-in-laravel-custom-pipelines-beyond-middleware-1) [ ![](https://cdn.msaied.com/739/2d6897fdcdcf090613f96f72a64b8a78.png) · 4 min read### MySQL Full-Text Search in Laravel: Indexes, Relevance Scoring, and Boolean Mode 4 Oct 2026 ](https://www.msaied.com/public/articles/mysql-full-text-search-in-laravel-indexes-relevance-scoring-and-boolean-mode) [ ![](https://cdn.msaied.com/738/073696a3fefe18bec825beec5ac658f5.png) · 4 min read### Laravel Queue Rate-Limited Middleware: Throttling Jobs Without Losing Work 4 Oct 2026 ](https://www.msaied.com/public/articles/laravel-queue-rate-limited-middleware-throttling-jobs-without-losing-work) Have a technical challenge? ---------------------------- Tell me what you’re building. I reply within two working days. [Discuss your project ↗](https://www.msaied.com/public#contact) © 2026 Mohamed Said · Built with Laravel, meant to last.Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. - [Home](https://www.msaied.com/public) - [Articles](https://www.msaied.com/public/articles) - [Certificates](https://www.msaied.com/public/certificates) - [GitHub](https://github.com/EG-Mohamed) - [LinkedIn](https://www.linkedin.com/in/msaiedm/) - [WhatsApp](https://wa.me/201094619204) - [Email Address](mailto:hello@msaied.com) - [My CV](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view) - [Sitemap](https://www.msaied.com/public/sitemap.xml)