README

Custom Filament form field that lets users draw and download a signature. The component ships with a Laravel service provider, Blade view, and a Signature Pad driver tailored for Filament v3+.

Requirements

PHP 8.2+
Laravel 10+
Filament 3+

Installation

Pull the package into your project (point Composer to the path/VCS of this plugin):
```
composer require alfianm/filament-signature-pad
```

(Optional) If you disabled package auto-discovery, register the service provider manually in config/app.php:

'providers' => [
    // ...
    Alfianm\FilamentSignaturePad\SignaturePadServiceProvider::class,
];

Publish Filament assets so the JavaScript bundle is copied into public/:
```
php artisan filament:assets
```
Re-run this command whenever you update the package.
Clear cached assets and refresh your browser to make sure the new scripts are loaded.

Usage

In any Filament resource or form schema, import the field class and add it to your form:

use Alfianm\FilamentSignaturePad\Forms\Components\SignaturePad;

// ...

SignaturePad::make('signature')
    ->label('Signature')
    ->penColor('#EF4444')        // optional, defaults to black
    ->backgroundColor('white')   // optional, defaults to transparent
    ->height('16rem')            // optional, defaults to 14rem
    ->downloadPadding(12),       // optional, padding (px) around signature when downloaded

When the user draws on the field, the Image (base64 PNG) is stored in the form state. You can save the string directly to your database or process it (e.g. store as file storage).

The Download button generates a PNG cropped to the drawn area. Adjust the downloadPadding() value if you want more or less whitespace around the signature.

Updating Assets

If you pull updates that change the JavaScript driver, run:

php artisan filament:assets

Then hard-refresh your Filament panel or clear browser cache to ensure the latest script loads.

Troubleshooting

Command filament:assets not found – verify you are using Filament v3+ and that the package is installed in a Filament project.
JS changes not appearing – run php artisan filament:assets, clear compiled views (php artisan view:clear), and hard-refresh the browser.
Signature not filling full width – ensure the field is placed inside a column span that occupies the desired width (e.g. call ->columnSpanFull() on the field in your form schema).

License

This plugin is released under the MIT license.

alfianm / filament-signature-pad

Maintainers

Details