PHPackages marcelorodrigo/filament-barcode-scanner-field - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. marcelorodrigo/filament-barcode-scanner-field ActiveLibrary[Utility & Helpers](/categories/utility) marcelorodrigo/filament-barcode-scanner-field ============================================= A camera-based barcode and QR code scanner input field for Filament forms. Features a modal interface with real-time scanning. v1.1.3(3mo ago)81.8k↑24.1%2[7 issues](https://github.com/marcelorodrigo/filament-barcode-scanner-field/issues)[2 PRs](https://github.com/marcelorodrigo/filament-barcode-scanner-field/pulls)MITPHPPHP ^8.3CI passing Since Dec 27Pushed 1mo agoCompare [ Source](https://github.com/marcelorodrigo/filament-barcode-scanner-field)[ Packagist](https://packagist.org/packages/marcelorodrigo/filament-barcode-scanner-field)[ Docs](https://github.com/marcelorodrigo/filament-barcode-scanner-field)[ GitHub Sponsors](https://github.com/sponsors/marcelorodrigo)[ RSS](/packages/marcelorodrigo-filament-barcode-scanner-field/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (5)Dependencies (14)Versions (8)Used By (0) Filament Barcode Scanner Field ============================== [](#filament-barcode-scanner-field) [![Latest Version on Packagist](https://camo.githubusercontent.com/edfccc07dd017e448909ebc199ef0b7c868fd4d5da5278cfdc5e35ca8448ff6f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d617263656c6f726f647269676f2f66696c616d656e742d626172636f64652d7363616e6e65722d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/marcelorodrigo/filament-barcode-scanner-field)[![GitHub Tests Action Status](https://camo.githubusercontent.com/2938dd32e8964e43e7df95ead0588ffa40da881a71e62e1cbcc1426c3453b987/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d617263656c6f726f647269676f2f66696c616d656e742d626172636f64652d7363616e6e65722d6669656c642f72756e2d74657374732e796d6c3f6272616e63683d6d6173746572266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/marcelorodrigo/filament-barcode-scanner-field/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/773a0cadabde3af419436404e4b54a15ce9cd0377e3850439835adca70a17d95/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d617263656c6f726f647269676f2f66696c616d656e742d626172636f64652d7363616e6e65722d6669656c642f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/marcelorodrigo/filament-barcode-scanner-field/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/d19f022afe997575fb4247488c913702d43060d2a0e321cd4f85281b2cd6e6c6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d617263656c6f726f647269676f2f66696c616d656e742d626172636f64652d7363616e6e65722d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/marcelorodrigo/filament-barcode-scanner-field) [![filament-barcode-scanner-field](https://camo.githubusercontent.com/f0c8f012f0e27312dc6ca94ea105593bcbf873537f735541e03b48bd390e8a17/68747470733a2f2f736f6369616c6966792e6769742e63692f6d617263656c6f726f647269676f2f66696c616d656e742d626172636f64652d7363616e6e65722d6669656c642f696d6167653f637573746f6d5f6465736372697074696f6e3d46696c616d656e742b5152253246426172636f64652b7363616e6e65722b6669656c64266465736372697074696f6e3d3126666f6e743d52616c65776179266c616e67756167653d31266e616d653d31266f776e65723d31267061747465726e3d466c6f6174696e672b436f6773267468656d653d4175746f)](https://camo.githubusercontent.com/f0c8f012f0e27312dc6ca94ea105593bcbf873537f735541e03b48bd390e8a17/68747470733a2f2f736f6369616c6966792e6769742e63692f6d617263656c6f726f647269676f2f66696c616d656e742d626172636f64652d7363616e6e65722d6669656c642f696d6167653f637573746f6d5f6465736372697074696f6e3d46696c616d656e742b5152253246426172636f64652b7363616e6e65722b6669656c64266465736372697074696f6e3d3126666f6e743d52616c65776179266c616e67756167653d31266e616d653d31266f776e65723d31267061747465726e3d466c6f6174696e672b436f6773267468656d653d4175746f) Overview -------- [](#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](https://github.com/mebjas/html5-qrcode) for reliable cross-browser barcode scanning. ### Features [](#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 [](#screenshot) [![Filament Barcode Scanner Field](assets/screenshot-barcode.png)](assets/screenshot-barcode.png) *Barcode input field with scan button in dark mode* Installation ------------ [](#installation) Install the package via Composer: ``` composer require marcelorodrigo/filament-barcode-scanner-field ``` The package will automatically register itself. ### Publishing Assets (Optional) [](#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 ----- [](#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 [](#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 [](#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 [](#available-methods) MethodDescriptionDefault`icon(string $icon)`Set a custom [Heroicon](https://heroicons.com/) for the scan button`heroicon-m-qr-code``label(string | Htmlable | null $label)`Set the field label`null``placeholder(string | Htmlable | null $placeholder)`Set input placeholder`"Enter {label}..."``required(bool | string $condition = true)`Make the field required`false`### Standard Filament 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 [](#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 [](#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 -------------- [](#advanced-usage) ### Customizing the Scanner Experience [](#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 [](#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 [](#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 --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on recent changes. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. ### Requirements [](#requirements) - Follow [PSR-2 Coding Standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md) - Add tests for your changes - Use [Conventional Commits](https://www.conventionalcommits.org/) for commit messages - Document any behavioral changes ### Running Tests [](#running-tests) ``` composer test ``` Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](https://github.com/marcelorodrigo/filament-barcode-scanner-field/security) on how to report security vulnerabilities. Credits ------- [](#credits) - [Marcelo Wiebbelling](https://github.com/marcelorodrigo) - [All Contributors](../../contributors) ### Inspiration [](#inspiration) This package was inspired by [jeffersongoncalves/filament-qrcode-field](https://github.com/jeffersongoncalves/filament-qrcode-field) - a QR code field plugin for Filament. Thank you for the great work! License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 43 — FairBetter than 91% of packages Maintenance68 Regular maintenance activity Popularity29 Limited adoption so far Community10 Small or concentrated contributor base Maturity54 Maturing project, gaining track record Bus Factor1 Top contributor holds 81% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~9 days Total 5 Last Release 106d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/7a909961e5a7087aa3e8689674d53f573c2f3ac3b73baed1f6c4af23c708ba23?d=identicon)[marcelorodrigo](/maintainers/marcelorodrigo) --- Top Contributors [![marcelorodrigo](https://avatars.githubusercontent.com/u/443962?v=4)](https://github.com/marcelorodrigo "marcelorodrigo (17 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)") --- Tags barcodebarcode-scannerfilamentfilamentphplaravelqrcodeqrcode-scannerqr codeqrcodelaravelbarcodeformfieldinputscannerfilamentfilamentphpmarcelorodrigocamera-scannerinput-fieldbarcode-scanner ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/marcelorodrigo-filament-barcode-scanner-field/health.svg) ``` [![Health](https://phpackages.com/badges/marcelorodrigo-filament-barcode-scanner-field/health.svg)](https://phpackages.com/packages/marcelorodrigo-filament-barcode-scanner-field) ``` ### Alternatives [codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 320392.1k17](/packages/codewithdennis-filament-select-tree)[defstudio/filament-searchable-input A searchable autocomplete input for Filament forms 3212.4k](/packages/defstudio-filament-searchable-input)[lara-zeus/popover Zeus Popover is filamentphp component to show a Popover with custom content in tables and infolist 2968.2k3](/packages/lara-zeus-popover)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[lara-zeus/quantity filamentphp Input Number component, with user-friendly increment and decrement controls 2065.8k3](/packages/lara-zeus-quantity) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)