Weave Code
Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message
Filament Qrcode Field

Filament Qrcode Field Laravel Package

jeffersongoncalves/filament-qrcode-field

A Filament QR code field that adds a scannable QR input component using html5-qrcode, with publishable config for modal width, reader size and scanner FPS. Supports Filament 3, 4 and 5 through matching package versions.

View on GitHub
Deep Wiki
Context7

Filament QrCode Field is a Laravel package that adds QR code input and scanning to Filament 5 forms (2.x targets Filament 4, 1.x targets Filament 3). Install it with Composer, then publish the config file to control the html5-qrcode asset URL, modal width, reader dimensions, and scanner frame size.

  • Camera-based QR scanning powered by html5-qrcode
  • Publishable config with sensible defaults for modal, reader, and scanner
  • Simple form field integration alongside other Filament inputs
  • Customizable dimensions — set FPS, width, and height for the scanner
  • Versioned compatibility across Filament 3, 4, and 5
Frequently asked questions about Filament Qrcode Field
How do I install the Filament QR Code field package?
Install it with Composer using composer require jeffersongoncalves/filament-qrcode-field:^3.0. The package requires PHP 8.2 or higher and Filament 5.0, and it registers itself through Laravel package discovery so no manual provider registration is needed. If you want to customise the defaults, publish the config file with php artisan vendor:publish --tag="filament-qrcode-field-config".
Which Filament versions does filament-qrcode-field support?
The package ships parallel major branches that map to Filament releases: 3.x targets Filament 5, 2.x targets Filament 4, and 1.x targets Filament 3. Pin the Composer constraint to the branch that matches the Filament version already installed in your application. Mixing a package major with the wrong Filament major will break the form component API.
Does this field scan QR codes with a camera or only render them?
It is an input field with a built-in camera scanner powered by html5-qrcode, so users can read a QR code directly inside a Filament form instead of typing a value. The scanner opens in a modal, and the reader and scanner dimensions are configurable. The html5-qrcode script is loaded from unpkg by default but can be pointed at your own hosted copy.
How do I configure the QR reader size, scanner FPS or modal width?
Publish the config file and edit the reader.width and reader.height values for the scanning viewport, plus scanner.fps, scanner.width and scanner.height for capture performance. The modal.width key accepts a Filament Width enum such as Width::Large, and asset_js controls where the html5-qrcode library is loaded from. Lowering the FPS reduces CPU load on low-end devices and mobile browsers.
Can I self-host html5-qrcode instead of loading it from a CDN?
Yes. The asset_js config key defaults to the unpkg URL for html5-qrcode 2.3.8, but you can replace it with a path to a file you serve yourself, for example from your public directory or a Vite-built asset. Self-hosting is the safer choice for admin panels behind a strict Content Security Policy or in air-gapped or offline deployments. Remember to set the correct MIME type and cache headers on the hosted file.
Where does the package store the QR code payload?
The package is a pure UI layer and ships no migrations or models, so nothing is persisted automatically. You store the scanned or generated value in a column you define yourself, such as a qr_payload or code string column on the relevant model. Because there is no built-in persistence, server-side validation of payload length and format belongs in your FormRequest or model rules.
Is the QR Code field translatable into other languages?
Yes. Version 1.3.0 added six locales on top of the existing set: az, hi, ru, uk, uz and zh_CN, covering the field's labels and validation strings. Note that common enterprise locales such as Spanish, French, German, Portuguese, Japanese and Arabic are not included yet, so those operators will fall back to English. You can publish the lang files and override terminology if your domain uses different wording.
Is it safe to encode user-supplied URLs or PII in a QR code with this field?
The field itself only renders and scans strings, so any injection risk comes from what you allow into the payload. Sanitize and allowlist URL schemes and hosts before saving, and prefer short-lived signed tokens over plaintext secrets when the QR code encodes access credentials. If the encoded content is personal data, treat the stored payload like any other sensitive column and consider encrypting it at rest.
How do I test a Filament form that uses the QR Code field?
Test it like any other Livewire-backed Filament form: use Livewire::test on the page or resource form, call fillForm with the field's state, then assert the payload was saved with assertDatabaseHas. The camera scanner is client-side JavaScript, so PHP tests can only assert the field accepts and persists a value rather than exercising the scan itself. Assert your validation rules separately to cover rejected or oversized payloads.
Is the package actively maintained and what changed in version 1.3.0?
Version 1.3.0 is an additive internationalisation release that adds six new locales alongside documentation, CI and dependency housekeeping, with no breaking changes or deprecations. Upgrading from 1.2.x is a simple composer update under a locked constraint, with no config migration or asset republish required. As with most single-maintainer Filament plugins, pin the major version and review GitHub releases before upgrading across majors.
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
microsoft/fluentui-system-icons
mmccook/php-json-canonicalization-scheme
middlewares/firewall
qubiqx/montapacking
nyoncode/laravel-package-console
pnscripts/filament-broadquill-lite
pnscripts/laravel-sentfold-lite
vleap/mx-sdk-laravel-internal
twidpay/utils
htetmyathlaing/scout-elasticsearch-driver
artisan-toolbox/front-awesome
ls/client-assistant
users-au/laravel-client
cgv/localized-resource
noith/settings
kda/laravel-package
kda/filament-dynamic-navigation
bypersoft/signbox
pairus/product-data
fayne/laravel-filament-cms-core