Filament v4 Custom Field Plugin: Signature Pad | 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 v4 Custom Field Plugins: Building a Reusable Signature Pad Component On this page 1. [ Building a Reusable Signature Pad Field for Filament v4 ](#building-a-reusable-signature-pad-field-for-filament-v4) 2. [ Project Structure ](#project-structure) 3. [ Registering Assets the Right Way ](#registering-assets-the-right-way) 4. [ The Field Class ](#the-field-class) 5. [ The Blade View and Alpine Wiring ](#the-blade-view-and-alpine-wiring) 6. [ The Alpine Component ](#the-alpine-component) 7. [ Consuming the Field ](#consuming-the-field) 8. [ Storing the Payload ](#storing-the-payload) 9. [ Key Takeaways ](#key-takeaways) ![Filament v4 Custom Field Plugins: Building a Reusable Signature Pad Component](https://cdn.msaied.com/369/4654a4b25d88862c21064130ec028ffb.png) #filament #laravel #livewire #plugins Filament v4 Custom Field Plugins: Building a Reusable Signature Pad Component =============================================================================== 5 Jul 2026 3 min read ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said Table of contents 9 sections 1. [ 01 Building a Reusable Signature Pad Field for Filament v4 ](#building-a-reusable-signature-pad-field-for-filament-v4) 2. [ 02 Project Structure ](#project-structure) 3. [ 03 Registering Assets the Right Way ](#registering-assets-the-right-way) 4. [ 04 The Field Class ](#the-field-class) 5. [ 05 The Blade View and Alpine Wiring ](#the-blade-view-and-alpine-wiring) 6. [ 06 The Alpine Component ](#the-alpine-component) 7. [ 07 Consuming the Field ](#consuming-the-field) 8. [ 08 Storing the Payload ](#storing-the-payload) 9. [ 09 Key Takeaways ](#key-takeaways) Building a Reusable Signature Pad Field for Filament v4 ------------------------------------------------------- Filament v4's unified Schema API makes custom field plugins more composable than ever. Rather than fighting the framework with raw Blade hacks, you can ship a self-contained package that drops cleanly into any `Form`, `Infolist`, or `Table` schema. This walkthrough builds a real signature pad field — the kind you'd use in a contracts or onboarding flow — and covers every layer from asset bundling to state hydration. ### Project Structure ```php src/ SignaturePad.php # Field class SignaturePadServiceProvider.php resources/ js/signaturePad.js # Alpine component views/ signature-pad.blade.php ``` ### Registering Assets the Right Way Filament v4 uses `FilamentAsset` for scoped asset loading — assets are only injected when the component is actually rendered, not globally. ```php // SignaturePadServiceProvider.php use Filament\Support\Assets\AlpineComponent; use Filament\Support\Facades\FilamentAsset; public function boot(): void { FilamentAsset::register([ AlpineComponent::make('signature-pad', __DIR__ . '/../dist/signature-pad.js'), ], package: 'acme/filament-signature-pad'); $this->loadViewsFrom(__DIR__ . '/../resources/views', 'signature-pad'); } ``` Using `AlpineComponent` instead of a raw `Js` asset tells Filament to lazy-load and register the Alpine component automatically — no manual `Alpine.data()` call in your app. ### The Field Class ```php // SignaturePad.php namespace Acme\FilamentSignaturePad; use Filament\Forms\Components\Field; class SignaturePad extends Field { protected string $view = 'signature-pad::signature-pad'; protected bool $clearable = true; protected string $format = 'image/png'; public function clearable(bool $condition = true): static { $this->clearable = $condition; return $this; } public function format(string $mimeType): static { $this->format = $mimeType; return $this; } public function getClearable(): bool { return $this->clearable; } public function getFormat(): string { return $this->format; } } ``` Keep the field class thin. Business logic (e.g., converting the base64 payload to a stored file) belongs in a dedicated action or cast, not here. ### The Blade View and Alpine Wiring ```blade {{-- resources/views/signature-pad.blade.php --}} Clear ``` The `ax-load` / `ax-load-src` pattern is Filament v4's lazy Alpine loader. It fetches the component script only when the DOM node is present. ### The Alpine Component ```javascript // resources/js/signaturePad.js export default function signaturePad({ state, clearable, format }) { return { state, clearable, drawing: false, init() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); canvas.addEventListener('mousedown', () => { this.drawing = true; ctx.beginPath(); }); canvas.addEventListener('mousemove', (e) => { if (!this.drawing) return; const r = canvas.getBoundingClientRect(); ctx.lineTo(e.clientX - r.left, e.clientY - r.top); ctx.stroke(); }); canvas.addEventListener('mouseup', () => { this.drawing = false; this.state = canvas.toDataURL(format); }); }, clear() { const canvas = this.$refs.canvas; canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); this.state = null; } }; } ``` State is synced back to Livewire via `$entangle` on `mouseup` — not on every `mousemove` — keeping wire calls minimal. ### Consuming the Field ```php use Acme\FilamentSignaturePad\SignaturePad; SignaturePad::make('signature') ->clearable() ->format('image/svg+xml') ->required() ->columnSpanFull(), ``` ### Storing the Payload The field stores a raw base64 data URL. Convert it on save using a model observer or a dedicated action: ```php // In your CreateRecord action or observer $data['signature'] = (new StoreSignatureImage)($data['signature']); ``` Keep the conversion outside the field — the field's only job is capturing and surfacing state. ### Key Takeaways - Use `FilamentAsset::register` with `AlpineComponent` for scoped, lazy asset loading. - `ax-load` / `ax-load-src` defers Alpine component hydration until the DOM node exists. - `$entangle` + `$applyStateBindingModifiers` is the canonical way to sync custom field state with Livewire. - Keep field classes thin; push persistence logic to actions or observers. - Publish views via `loadViewsFrom` so consumers can override templates without forking the package. Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fmsaied.com%2Farticles%2Ffilament-v4-custom-field-plugins-building-a-reusable-signature-pad-component&text=Filament+v4+Custom+Field+Plugins%3A+Building+a+Reusable+Signature+Pad+Component) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmsaied.com%2Farticles%2Ffilament-v4-custom-field-plugins-building-a-reusable-signature-pad-component) Frequently Asked Questions ---------------------------- 3 questions Q01 How do I handle touch events for mobile signature capture? Add `touchstart`, `touchmove`, and `touchend` listeners in your Alpine component alongside the mouse events. Extract the coordinates with `event.touches[0].clientX` and call `preventDefault()` on touchmove to stop page scrolling during drawing. Q02 Can I validate the signature field to ensure it isn't empty? Yes. Because the field stores a string (the data URL) or null, you can chain `->required()` on the field. For a more precise check — ensuring the canvas isn't just a blank white rectangle — add a custom Filament validation rule that inspects the data URL length or pixel entropy. Q03 How do I make the component work inside a Filament Infolist for read-only display? Create a companion `SignaturePadEntry` class extending `Filament\Infolists\Components\Entry` with its own Blade view that renders an `<img>` tag from the stored data URL. The field and entry are separate classes in Filament v4's unified Schema API. Continue reading More Articles --------------- [ View all ](https://msaied.com/articles) [ ![Domain-Driven Design in Laravel: Value Objects, DTOs, and Actions Without Bloat](https://cdn.msaied.com/377/b5c2aef77aed51ee8694f377085af424.png) laravel ddd architecture ### Domain-Driven Design in Laravel: Value Objects, DTOs, and Actions Without Bloat Learn how to model domain concepts with value objects, DTOs, and single-action classes in Laravel — keeping yo... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 6 Jul 2026 4 min read Read ](https://msaied.com/articles/domain-driven-design-in-laravel-value-objects-dtos-and-actions-without-bloat) [ ![What's Missing from Your PHP Development Environment: Meet DDLess](https://cdn.msaied.com/379/baa8990d4c7b46d18498d69d68f9b6d2.png) DDLess PHP Debugging Laravel Tools ### What's Missing from Your PHP Development Environment: Meet DDLess DDLess is a PHP development workbench that brings step debugging, an in-breakpoint playground, and an interact... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 6 Jul 2026 3 min read Read ](https://msaied.com/articles/whats-missing-from-your-php-development-environment-meet-ddless) [ ![CQRS in Laravel Without a Framework: Commands, Handlers, and Query Objects](https://cdn.msaied.com/376/bec9da4b7a7ddeee26dac3df6f5d6c44.png) laravel cqrs architecture ### CQRS in Laravel Without a Framework: Commands, Handlers, and Query Objects Skip the heavy CQRS libraries. Learn how to implement commands, command handlers, and query objects in plain L... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 6 Jul 2026 3 min read Read ](https://msaied.com/articles/cqrs-in-laravel-without-a-framework-commands-handlers-and-query-objects) [ ![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)