Filament Barcode Scanner Field

Overview

A powerful barcode scanner input field for Filament applications. This package provides an intuitive interface that allows users to scan barcodes using their device's camera directly from your Filament forms. Built with html5-qrcode for reliable cross-browser barcode scanning.

Features

• Modal Scanner Interface: Opens a clean modal popup for barcode scanning without cluttering your forms
• Real-time Camera Scanning: Uses device camera to scan barcodes instantly
• Customizable Icons: Customize the input suffix icon with any Heroicon
• Responsive Design: Works seamlessly across desktop and mobile devices
• Filament Native: Extends Filament's TextInput with full form validation support
• Livewire Integration: Automatically updates form state when barcode is scanned
• Filament v4 & v5 Compatible: Works with both Filament versions

Screenshot

Barcode input field with scan button in dark mode

Installation

Install the package via Composer:

composer require marcelorodrigo/filament-barcode-scanner-field

The package will automatically register itself.

Publishing Assets (Optional)

You can publish the config file with:

php artisan vendor:publish --tag="filament-barcode-scanner-field-config"

This is the contents of the published config file:

return [
    // Configuration options can be added here in future versions
];

Optionally, you can publish the views using:

php artisan vendor:publish --tag="filament-barcode-scanner-field-views"

Usage

Use the BarcodeInput component in your Filament forms:

use Marcelorodrigo\FilamentBarcodeScannerField\Forms\Components\BarcodeInput;

public function form(Form $form): Form
{
    return $form
        ->schema([
            BarcodeInput::make('barcode')
                ->label('Product Barcode')
                ->required(),
        ]);
}

Basic Example

use Marcelorodrigo\FilamentBarcodeScannerField\Forms\Components\BarcodeInput;

// Simple usage
BarcodeInput::make('sku')
    ->label('SKU Code')
    ->placeholder('Scan or enter barcode...')
    ->required();

With Custom Icon

use Marcelorodrigo\FilamentBarcodeScannerField\Forms\Components\BarcodeInput;

// Customize with a different Heroicon
BarcodeInput::make('barcode')
    ->icon('heroicon-o-qr-code')
    ->label('Scan Product');

Available Methods

Standard Filament Methods

Since BarcodeInput extends TextInput, all standard Filament field methods are supported:

BarcodeInput::make('barcode')
    ->icon('heroicon-o-arrow-right')
    ->label('Product Barcode')
    ->placeholder('Scan or type barcode...')
    ->required()
    ->unique('products', 'barcode')
    ->rules(['min:8', 'max:50'])
    ->helperText('Scan the barcode on the product packaging')
    ->hint('Required')
    ->live()
    ->afterStateUpdated(fn ($state) => $this->lookupProduct($state));

Supported Languages

This package includes translations for 31 languages:

📝 Translation Structure

All translations follow this structure:

• actions.scan_qrcode - Scan button aria-label
• modal.title - Modal header with :label placeholder
• modal.default_label - Default "Barcode" text
• modal.close_button - Close button text
• field.placeholder_prefix/suffix - Placeholder construction
• field.default_label - Field label fallback

🇪🇺 European (21)

• 🇬🇧 English (en)
• 🇩🇰 Danish (da)
• 🇳🇱 Dutch (nl)
• 🇫🇮 Finnish (fi)
• 🇫🇷 French (fr)
• 🇩🇪 German (de)
• 🇬🇷 Greek (el)
• 🇭🇺 Hungarian (hu)
• 🇮🇹 Italian (it)
• 🇳🇴 Norwegian (no)
• 🇵🇱 Polish (pl)
• 🇵🇹 Portuguese (pt)
• 🇧🇷 Portuguese Brazil (pt_BR)
• 🇷🇴 Romanian (ro)
• 🇷🇺 Russian (ru)
• 🇸🇰 Slovak (sk)
• 🇪🇸 Spanish (es)
• 🇸🇪 Swedish (sv)
• 🇹🇷 Turkish (tr)
• 🇺🇦 Ukrainian (uk)
• 🇨🇿 Czech (cs)

🇨🇳 Asian (7)

• 🇨🇳 Chinese Simplified (zh_CN)
• 🇹🇼 Chinese Traditional (zh_TW)
• 🇮🇩 Indonesian (id)
• 🇯🇵 Japanese (ja)
• 🇰🇷 Korean (ko)
• 🇹🇭 Thai (th)
• 🇻🇳 Vietnamese (vi)

🌍 Middle Eastern & South Asian (3)

• 🇸🇦 Arabic (ar)
• 🇮🇱 Hebrew (he)
• 🇮🇳 Hindi (hi)

Publishing Translations

To customize translations or add new languages:

php artisan vendor:publish --tag="filament-barcode-scanner-field-translations"

Translation files will be published to resources/lang/vendor/filament-barcode-scanner-field/.

Advanced Usage

Customizing the Scanner Experience

The scanner uses the html5-qrcode library with default settings optimized for common barcodes:

• FPS: 10 frames per second for smooth scanning
• QR Box: 250x250px scanning area

Handling Scan Results

The barcode value is automatically set to the form field when a barcode is successfully scanned. You can add Livewire event listeners to handle the scanned value:

BarcodeInput::make('barcode')
    ->live()
    ->afterStateUpdated(function ($state, Set $set) {
        // Lookup product by barcode
        $product = Product::where('barcode', $state)->first();
        
        if ($product) {
            $set('product_name', $product->name);
            $set('price', $product->price);
        }
    });

Form Validation with Scanned Barcodes

use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Select;

public function form(Form $form): Form
{
    return $form
        ->schema([
            BarcodeInput::make('barcode')
                ->label('Product Barcode')
                ->required()
                ->rules(['exists:products,barcode'])
                ->validationMessages([
                    'exists' => 'Product with this barcode not found.',
                ]),
            
            TextInput::make('quantity')
                ->numeric()
                ->required()
                ->default(1),
        ]);
}

Changelog

Please see CHANGELOG for more information on recent changes.

Contributing

Please see CONTRIBUTING for details.

Requirements

• Follow PSR-2 Coding Standard
• Add tests for your changes
• Use Conventional Commits for commit messages
• Document any behavioral changes

Running Tests

composer test

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Marcelo Wiebbelling
• All Contributors

Inspiration

This package was inspired by jeffersongoncalves/filament-qrcode-field - a QR code field plugin for Filament. Thank you for the great work!

License

The MIT License (MIT). Please see License File for more information.