PHPackages fadlee/filament-qrcode-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. fadlee/filament-qrcode-field ActiveLibrary[Utility & Helpers](/categories/utility) fadlee/filament-qrcode-field ============================ QR code scanner for Filament v1.0.0(1y ago)4351↓50%MITJavaScriptPHP >=8.1 Since Jan 28Pushed 1y ago1 watchersCompare [ Source](https://github.com/fadlee/filament-qrcode-field)[ Packagist](https://packagist.org/packages/fadlee/filament-qrcode-field)[ RSS](/packages/fadlee-filament-qrcode-field/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (4)Versions (2)Used By (0) Filament QR Code Field ====================== [](#filament-qr-code-field) A custom form field component for Filament PHP that adds QR code scanning capabilities to your forms. This package provides a text input field with an integrated QR code scanner using the device's camera. Features -------- [](#features) - Seamless integration with Filament forms - Support for multiple QR code inputs on a single page - Compatible with Filament action modals - Real-time QR code scanning using device camera - Automatic camera selection (prefers rear camera if available) - Modal interface for scanning QR code - Uses ZXing library for reliable QR code detection Requirements ------------ [](#requirements) - PHP 8.1 or higher - Laravel 10.0 or higher - Filament 3.x - HTTPS enabled environment (required for camera access) Installation ------------ [](#installation) You can install the package via composer: ``` composer require fadlee/filament-qrcode-field ``` After installation, you need to publish the package assets: ``` php artisan filament:assets ``` The package will automatically register its service provider. Usage ----- [](#usage) 1. Import the QrCodeInput component in your Filament resource or form: ``` use Fadlee\FilamentQrCodeField\Forms\Components\QrCodeInput; ``` 2. Add the field to your form: ``` public static function form(Form $form): Form { return $form ->schema([ QrCodeInput::make('qrcode') ->label('QR Code') ->placeholder('Click to scan QR code...'), // ... other fields ]); } ``` 3. Using multiple QR code inputs: ``` public static function form(Form $form): Form { return $form ->schema([ QrCodeInput::make('product_code') ->label('Product QR Code') ->placeholder('Scan product code...'), QrCodeInput::make('location_code') ->label('Location QR Code') ->placeholder('Scan location code...'), ]); } ``` 4. Using in Filament action modals: ``` use Filament\Actions\Action; public static function getActions(): array { return [ Action::make('scanQR') ->form([ QrCodeInput::make('qrcode') ->label('Scan QR Code') ->required(), ]) ->action(function (array $data) { // Process the scanned QR code // $data['qrcode'] contains the scanned value }), ]; } ``` How it Works ------------ [](#how-it-works) The package adds QR code scanning capability to a text input field. When the input field is clicked, it opens a modal with camera access to scan QR codes. Once a QR code is successfully scanned, the value is automatically populated into the input field. Security -------- [](#security) - The package requires camera permissions from the user's browser - Camera access is only activated when the scan modal is opened - Camera is automatically stopped when the modal is closed Technical Implementation ------------------------ [](#technical-implementation) The QR code scanner is seamlessly integrated into Filament through several key mechanisms: 1. **Modal Injection**: The package automatically injects the QR code scanner modal markup at the end of each Filament page using Filament's render hooks system. 2. **JavaScript Integration**: The package includes a custom JavaScript component that handles the camera access and QR code scanning. 3. **Event Handling**: The package uses event delegation to handle QR code scanning requests. When a QR code input field is clicked, the scanner modal is automatically opened and the camera is activated. 4. **Camera Access**: The package uses the browser's `getUserMedia` API to request camera access. Due to browser security policies, HTTPS is required for camera access to work. The camera is automatically selected as the rear camera if available, and the user is prompted to grant camera access. Contributing ------------ [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. Credits ------- [](#credits) This package was inspired by and contains code adapted from the [barcode-field](https://github.com/Design-The-Box/barcode-field) package by Design-The-Box. We appreciate their contribution to the Filament ecosystem. License ------- [](#license) This package is open-sourced software licensed under the MIT license. ### Health Score 31 — LowBetter than 68% of packages Maintenance42 Moderate activity, may be stable Popularity18 Limited adoption so far Community7 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 Unknown Total 1 Last Release 469d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4c1592d56b089c6e88cfa113bac878bf494f25b9e9262d0c36d45f0ed13538ca?d=identicon)[fadlee](/maintainers/fadlee) --- Top Contributors [![fadlee](https://avatars.githubusercontent.com/u/334797?v=4)](https://github.com/fadlee "fadlee (4 commits)") --- Tags filamentfilament-pluginform-field ### Embed Badge ![Health badge](/badges/fadlee-filament-qrcode-field/health.svg) ``` [![Health](https://phpackages.com/badges/fadlee-filament-qrcode-field/health.svg)](https://phpackages.com/packages/fadlee-filament-qrcode-field) ``` ### Alternatives [schmeits/filament-character-counter This is a Filament character counter TextField and Textarea form field for Filament v4 and v5 33184.7k6](/packages/schmeits-filament-character-counter)[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)[pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[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)[creagia/filament-code-field A Filamentphp input field to edit or view code data. 58289.3k3](/packages/creagia-filament-code-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)