Barcode Scanner Field

• Overview
  • Features
  • Screenshot
• Installation
  • Publishing Assets (Optional)
• Usage
  • Basic Example
  • With Custom Icon
  • Available Methods
  • Standard Filament Methods
  • Supported Languages
  • Publishing Translations
• Advanced Usage
  • Customizing the Scanner Experience
  • Handling Scan Results
  • Form Validation with Scanned Barcodes
• Changelog
• Contributing
  • Requirements
  • Running Tests
• Security Vulnerabilities
• Credits
  • Inspiration
• License

#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.