PHPackages janczakb/filament-flex-fields - 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. [Admin Panels](/categories/admin) 4. / 5. janczakb/filament-flex-fields ActiveLibrary[Admin Panels](/categories/admin) janczakb/filament-flex-fields ============================= 70 Filament v5 form components with unified design system, lazy CSS/JS, optional JSON custom fields, layout primitives, and built-in Playground — one plugin for modern Laravel admin forms. 2.9.1(2w ago)552.7k12[1 issues](https://github.com/janczakb/filament-flex-fields/issues)[3 PRs](https://github.com/janczakb/filament-flex-fields/pulls)proprietaryPHPPHP ^8.3CI passing Since Jun 14Pushed 1w ago1 watchersCompare [ Source](https://github.com/janczakb/filament-flex-fields)[ Packagist](https://packagist.org/packages/janczakb/filament-flex-fields)[ Docs](https://github.com/janczakb/filament-flex-fields)[ Fund](https://www.buymeacoffee.com/janczakb)[ GitHub Sponsors](https://github.com/janczakb)[ RSS](/packages/janczakb-filament-flex-fields/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (17)Versions (39)Used By (0) [![Filament Flex Fields — 70 custom form components and JSON custom fields for Filament v5 Laravel admin panels](art/field-flex-thumb-r.png)](art/field-flex-thumb-r.png) Filament Flex Fields ==================== [](#filament-flex-fields) **Filament v5 · Laravel admin forms · 70 custom components · one design system** Replace a patchwork of field plugins with one cohesive form layer — lazy assets, optional JSON custom fields, built-in Playground. Pre-built CSS/JS · no Node.js in production · standalone fields or dynamic schemas · full per-component docs [ ![Documentation — flex-fields.mintlify.app](art/docs-button-v2.png) ](https://flex-fields.mintlify.app/) [![Latest Version on Packagist](https://camo.githubusercontent.com/c42b218523f2d682446b6fef4deb6bdbf2d774069943a9d8da20f1a29d347b5e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a616e637a616b622f66696c616d656e742d666c65782d6669656c64732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/janczakb/filament-flex-fields) [![License](https://camo.githubusercontent.com/63f322ce51eb3e3a61a9223ebff00e8f3d5338430b5f3d2422df8361276a502d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d70726f70726965746172792d3763336165642e7376673f7374796c653d666c61742d737175617265)](https://github.com/janczakb/filament-flex-fields/blob/main/LICENSE) [![Total Downloads](https://camo.githubusercontent.com/e46204dfb9a5ac300d529d0bb722286b8565c4715a37ed0f3a55009612501fdd/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a616e637a616b622f66696c616d656e742d666c65782d6669656c64732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/janczakb/filament-flex-fields) [![GitHub Stars](https://camo.githubusercontent.com/1115d0aafbe0bff270ae36d56247e13bc03de65aad90c518101cce92e643482d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6a616e637a616b622f66696c616d656e742d666c65782d6669656c64732e7376673f7374796c653d666c61742d737175617265)](https://github.com/janczakb/filament-flex-fields/stargazers) [![GitHub Issues](https://camo.githubusercontent.com/db34b3dc01b9116bbc3d8e66040fdb800602445d7d04b5e9c1b9707e7f860c84/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6a616e637a616b622f66696c616d656e742d666c65782d6669656c64732e7376673f7374796c653d666c61742d737175617265)](https://github.com/janczakb/filament-flex-fields/issues) [![Tests](https://camo.githubusercontent.com/04a5d0230087c3d928a046d5bf3ebc52e378ea838329856d36a2c761a9df8eea/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74657374732d70617373696e672d737563636573732e7376673f7374796c653d666c61742d737175617265)](https://github.com/janczakb/filament-flex-fields/actions) [![PHP 8.3+](https://camo.githubusercontent.com/9bf67f86d575c87bf6c023686d5e5a831f629a94a3bac355486e709814df4648/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e332532422d3737374242343f7374796c653d666c61742d737175617265266c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/9bf67f86d575c87bf6c023686d5e5a831f629a94a3bac355486e709814df4648/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e332532422d3737374242343f7374796c653d666c61742d737175617265266c6f676f3d706870266c6f676f436f6c6f723d7768697465) [![Laravel 11+](https://camo.githubusercontent.com/3fdb19b1865a346e4840d08846d80e1669181e4c0706d3e9edea0ae2733d4dec/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31312532422d4646324432303f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/3fdb19b1865a346e4840d08846d80e1669181e4c0706d3e9edea0ae2733d4dec/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31312532422d4646324432303f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465) [![Filament 5.x](https://camo.githubusercontent.com/c5f479a00b542af576cd7dc10ae8f3b115f09b5ef3868063dab11c383211c28a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e742d352e782d4635394530423f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/c5f479a00b542af576cd7dc10ae8f3b115f09b5ef3868063dab11c383211c28a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e742d352e782d4635394530423f7374796c653d666c61742d737175617265) **Filament Flex Fields** is a [Filament v5](https://filamentphp.com) plugin for **Laravel admin panels**: **70 custom form components**, a unified `--fff-*` design system, and an optional **JSON custom-field layer** (no EAV, no per-attribute migrations). Use any field standalone, or wire schemas through `FlexFieldFormBuilder` + `HasFlexFields`. --- Quick start ----------- [](#quick-start) **First-time install:** ``` composer require janczakb/filament-flex-fields php artisan filament:assets ``` Register the plugin on your Filament panel: ``` use Bjanczak\FilamentFlexFields\FilamentFlexFieldsPlugin; public function panel(Panel $panel): Panel { return $panel->plugin(FilamentFlexFieldsPlugin::make()); } ``` Then drop any component into a form — e.g. `MatrixChoiceField::make('priorities')`. Full install options (path repo, config, translations): [Installation](#installation). **Already installed?** See [Upgrading](#upgrading) below. --- Upgrading --------- [](#upgrading) When a new version is released, update the package and sync Filament assets into `public/`. **You do not need Node.js, npm, or `npm run build` in your Laravel app** — the plugin ships pre-built CSS/JS in `resources/dist/`. ### Standard upgrade (Packagist) [](#standard-upgrade-packagist) ``` composer update janczakb/filament-flex-fields php artisan filament:assets ``` That is the full required workflow for most apps. `php artisan filament:assets` syncs **both** Filament CSS/JS/Alpine bundles and bundled static media (MP3, emoji images, etc.) into `public/filament-flex-fields-assets/`. Fields resolve those files through `FlexFieldAssets::assetUrl()` with automatic cache busting. ### Path repository (monorepo / local package) [](#path-repository-monorepo--local-package) ``` composer update janczakb/filament-flex-fields php artisan filament:assets ``` After updating the package, run `php artisan filament:assets` in your Laravel app to sync bundled media and Filament assets into `public/`. ### Automate asset sync (recommended) [](#automate-asset-sync-recommended) Add this to your host app `composer.json` so `filament:assets` runs after every `composer install` / `composer update`: ``` "scripts": { "post-autoload-dump": [ "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", "@php artisan package:discover --ansi", "@php artisan filament:assets --ansi" ] } ``` With that hook in place, `composer update janczakb/filament-flex-fields` alone is enough. ### What you usually do **not** need on upgrade [](#what-you-usually-do-not-need-on-upgrade) StepNeeded?`npm install` / `npm run build` in the host app**No** — assets are pre-built in the packageManual copy of `public/filament-flex-fields-assets/`**No** — synced automatically by `filament:assets` (or on non-production app boot)`php artisan vendor:publish --tag=filament-flex-fields-config`**No** — unless [CHANGELOG](CHANGELOG.md) documents a new config key you want to set`php artisan vendor:publish --tag=filament-flex-fields-translations`**No** — see [Updating translations after a plugin upgrade](#updating-translations-after-a-plugin-upgrade)`php artisan optimize:clear`**Only** if the panel still serves stale CSS/JS after `filament:assets` (rare)### After upgrading in the browser [](#after-upgrading-in-the-browser) If a field looks unstyled after deploy, hard-refresh the Filament panel (`Cmd+Shift+R` / `Ctrl+Shift+R`) once so the browser drops cached asset URLs. ### Version-specific notes [](#version-specific-notes) Read [CHANGELOG.md](CHANGELOG.md) for breaking changes, new config keys, and migration steps for a given release. --- Why Flex Fields? ---------------- [](#why-flex-fields) ### Who it's for [](#who-its-for) Teams building **Filament v5** backends that need more than native inputs — **CRM** custom attributes, **CMS** page builders, **SaaS** onboarding, **marketplaces** with configurable product fields, or any admin UI that should look and behave like one product, not ten plugins stitched together. ### At a glance [](#at-a-glance) **Flex Fields****Typical approach****Scope****70** fields, layouts, and table columns — one packageMany single-purpose Filament plugins**Design**One `--fff-*` system — sizes, focus, menus, dark modeMixed UI from unrelated packages**Flexibility**Standalone fields **or** dynamic JSON on models — same componentsUsually one mode only**Depth**Validation, formatting, and interaction built in — not thin wrappersBasic inputs; edge cases left to you**Performance**Lazy per-field CSS/JS in ``, shared chunks, pre-built `dist/` — no npm in your appGlobal bundles or consumer-side builds**DX**Playground for every component + dedicated doc per fieldTrial-and-error per plugin### What's inside [](#whats-inside) **70 components** — 58 form fields, 9 layout/schema pieces, 3 table columns, plus `HoldConfirmAction`. Matrix grids, slugs, translatable groups, media, ratings, signatures, layouts — [full list](#custom-components-70). **One design system** — shared `sm` / `md` / `lg` sizes, `--fff-*` tokens, glass searchable menus, dark mode, consistent focus rings. **Lazy assets** — each field loads only its CSS/JS; heavy libraries share chunks and preload once per page. Pre-built `resources/dist/` means **no Node.js or Vite in your Laravel project**. Asset pipeline (technical)1. **Lean core** — `core.css` (~20 KB): tokens and hint chrome only. 2. **Conditional critical preload** — `teleported-menu` at `HEAD_END` only when a dropdown field is on the page (`FlexFieldStylesheetQueue::needsTeleportedMenu()`). Hold-confirm preloads per action via `@push` in `hold-confirm.blade.php`, not globally. 3. **Per-component bundles** — queued when the field renders, deduped per request via `FlexFieldStylesheetQueue` / `FlexFieldAlpineQueue`. Alpine entries register once; manifest chunks load on demand. 4. **Head delivery** — `emit-assets` pushes `` / `modulepreload` via `@stack('styles')` on full pages; Livewire partials emit inline asset batches. 5. **SPA injector** — `flex-field-asset-injector.js` loads missing lazy CSS/JS on morph and navigation, with FOUC prevention inside Filament modals. 6. **Lazy Alpine mount** — heavy fields defer `x-data` init until `x-intersect` (see `lazy-alpine-mount` Blade component). See [Performance-first assets](#performance-first-assets) for classes, manifest, and bundle metrics. **JSON custom fields** — define schemas in PHP config or `FlexFieldSchemaRegistry`, store values in one JSON column via `HasFlexFields`. `FlexFieldFormBuilder` renders live Filament forms. Ideal for CMS, tenant settings, and CRM-style attributes. Options: [config/filament-flex-fields.php](config/filament-flex-fields.php). **Playground & docs** — local preview of all 70 components; every field documented in `docs/` with methods, validation, and examples. --- Table of contents ----------------- [](#table-of-contents) - [Quick start](#quick-start) - [Upgrading](#upgrading) - [Why Flex Fields?](#why-flex-fields) - [Screenshots](#screenshots) - [Custom Components (70)](#custom-components-70) - [Use cases](#use-cases) - [Requirements](#requirements) - [Installation](#installation) - [Setup](#setup) - [Quick usage](#quick-usage) - [Playground](#playground) - [Documentation](#documentation) - [FAQ](#faq) - [Performance-first assets](#performance-first-assets) --- Screenshots ----------- [](#screenshots) [![NpsField - Enterprise NPS, CSAT, and Likert scale inputs with pills, segments, and emoji variants, color-coded detractor/passive/promoter ranges, and optional deselect](art/sc-33.png)](https://flex-fields.bjanczak.com/docs/nps-field)NpsField — NPS, CSAT & Likert Survey Scales [![CalculatorField - Numeric input with shared iOS-style calculator panel, per-field session memory, floating desktop panel, and mobile bottom sheet](art/sc-34.png)](https://flex-fields.bjanczak.com/docs/calculator-field)CalculatorField — Shared Floating Calculator Panel [![SignatureField - HTML5 canvas handwriting signature pad for Filament forms, allowing touch-friendly signatures with WebP export](art/sc-1.png)](https://flex-fields.bjanczak.com/docs/signaturefield)SignatureField — Canvas Handwriting Signature Pad [![MatrixChoiceField - Dynamic survey matrix choice grid with radio and checkbox modes, reactive disabled cells, and custom validations](art/sc-2.png)](https://flex-fields.bjanczak.com/docs/matrixchoicefield)MatrixChoiceField — Survey & Configurator Grid [![FlexTextareaField - Advanced multi-line input with speech dictation, character counter, autosize, and integrated emoji picker](art/sc-3.png)](https://flex-fields.bjanczak.com/docs/flextextareafield)FlexTextareaField — Autosize Textarea with Voice & Emoji Input [![ProgressBar and ProgressCircle - Multi-style visual progress indicators, linear trackers, and circular dashboard widgets for Laravel Filament](art/sc-4.png)](https://flex-fields.bjanczak.com/docs/progressbar)ProgressBar & ProgressCircle — Visual Progress Indicators [![CurrencyField - Multi-currency localized money input with real-time formatting, automatic decimal separation, and prefix selector](art/sc-5.png)](https://flex-fields.bjanczak.com/docs/currencyfield)CurrencyField — Multi-Currency Localized Input [![MapPickerField - Interactive map coordinate pin picker with marker support, location autofill, and custom layouts for Filament](art/sc-6.png)](https://flex-fields.bjanczak.com/docs/mappickerfield)MapPickerField — Interactive Map Pin Selector [![ItemCardGroup - Card-based layout component for structured settings blocks, user profiles, and clean Filament form layouts](art/sc-7.png)](https://flex-fields.bjanczak.com/docs/itemcardgroup)ItemCardGroup — Card-Based Layout Group [![DualListboxField - Highly interactive searchable dual panel transfer list for selecting and reordering multiple options in Filament v5](art/sc-8.png)](https://flex-fields.bjanczak.com/docs/duallistboxfield)DualListboxField — Reorderable Two-Panel Transfer List [![PriceRangeField - Dual-handle interactive price filter with histogram slider and minimum/maximum range controls](art/sc-9.png)](https://flex-fields.bjanczak.com/docs/pricerangefield)PriceRangeField — Dual-Handle Price Filter [![CreditCardField - Real-time credit card preview wrapper with Luhn validation and dynamic CVV flip animations](art/sc-10.png)](https://flex-fields.bjanczak.com/docs/creditcardfield)CreditCardField — Interactive Card Preview [![FlexColorPickerField - Color picker with preset swatches, opacity slider, visual grid, and eyedropper support](art/sc-11.png)](https://flex-fields.bjanczak.com/docs/flexcolorpickerfield)FlexColorPickerField — Advanced Color Picker [![AudioField and VoiceNoteRecorderField - Web-based audio player with waveform visualizer and in-browser voice note recorder](art/sc-12.png)](https://flex-fields.bjanczak.com/docs/audiofield)AudioField & VoiceNoteRecorderField — Waveform Audio & Voice Messages [![NumberStepper - Pill-shaped numeric stepper control with plus/minus buttons and dynamic NumberFlow animation](art/sc-13.png)](https://flex-fields.bjanczak.com/docs/numberstepper)NumberStepper — Animated Numeric Control [![ChoiceCards - Rich card-based selection list with custom icons, headers, badges, and selected highlight states](art/sc-14.png)](https://flex-fields.bjanczak.com/docs/choicecards)ChoiceCards — Rich Selection Grid [![VideoField - Interactive video URL player supporting YouTube, Vimeo, and local HTML5 videos with custom media controls](art/sc-15.png)](https://flex-fields.bjanczak.com/docs/videofield)VideoField — Video Player & Embed Component [![TrackSlider - Track-style range slider supporting single values, percentage progress, and min/max range handles](art/sc-16.png)](https://flex-fields.bjanczak.com/docs/trackslider)TrackSlider — Inline Range & Segment Slider [![SegmentControl - Elegant segmented sliding tab controls with support for icons, disabled states, and dynamic sizing](art/sc-17.png)](https://flex-fields.bjanczak.com/docs/segmentcontrol)SegmentControl — Segmented Button Tab Switcher [![CoverCard - Beautiful media card component for hero sections, product banners, or settings header blocks](art/sc-18.png)](https://flex-fields.bjanczak.com/docs/covercard)CoverCard — Media Rich Hero Banner [![ProgressCircle - Circular progress meters and semicircle tracking gauges for dashboard analytics](art/sc-19.png)](https://flex-fields.bjanczak.com/docs/progresscircle)ProgressCircle — Semicircle & Circular Dashboard Metrics [![RatingField - Highly customizable star rating input supporting custom icons, semantic color states, and fractional display](art/sc-20.png)](https://flex-fields.bjanczak.com/docs/ratingfield)RatingField — Visual Star Rating Input [![HoldConfirmAction - Custom action button requiring the user to press and hold to confirm high-risk actions like deletion](art/sc-21.png)](art/sc-21.png)HoldConfirmAction — Press & Hold Button [![SlugField combined with TranslatableFields showing multi-lingual title fields and live localized URL slug generation](art/sc-22.png)](https://flex-fields.bjanczak.com/docs/slugfield-and-titleslugfield)SlugField & TranslatableFields — Translatable SEO Slugs [![PhoneField - International phone number input field with country flag selectors, calling code auto-detection, and libphonenumber validation](art/sc-23.png)](https://flex-fields.bjanczak.com/docs/phonefield)PhoneField — International Phone Input [![ColorSwatchField - Interactive color swatch picker supporting circle/square shapes, size configurations, and focus indicators](art/sc-24.png)](https://flex-fields.bjanczak.com/docs/colorswatchfield)ColorSwatchField — Preset Color Swatches [![FlexEmojiPicker - Integrated searching emoji picker popover with skin tone categories and custom category tabs](art/sc-25.png)](https://flex-fields.bjanczak.com/docs/flextextinput)FlexEmojiPicker — Integrated Searchable Emoji Picker [![FlexDateRangeField - Dark-themed calendar date picker with date range selection and custom calendar rendering](art/sc-26.png)](https://flex-fields.bjanczak.com/docs/date-and-time-fields)FlexDateRangeField — Dark Mode Calendar & Date Range Picker [![ScheduleField - Weekly schedule editor with day toggles, multiple time slots, breaks, and copy-to-weekdays functionality](art/sc-27.png)](https://flex-fields.bjanczak.com/docs/schedule-field)ScheduleField — Weekly Schedule Editor [![LinkPreviewField - URL input field with live Open Graph / meta tag preview cards and server-side scraping](art/sc-28.png)](https://flex-fields.bjanczak.com/docs/link-preview-field)LinkPreviewField — Open Graph Link Preview Card [![SocialLinksField - Social profile link editor with brand icons, validation, reordering, and custom platforms support](art/sc-29.png)](https://flex-fields.bjanczak.com/docs/social-links-field)SocialLinksField — Social Profile Link Editor [![BarcodeScannerField - Barcode and QR input with Filament modal camera scanner, format filtering, EAN/UPC checksum validation, and hybrid native + ZXing engines](art/sc-30.png)](https://flex-fields.bjanczak.com/docs/barcode-scanner-field)BarcodeScannerField — Camera Barcode & QR Scanner [![FlexFileUpload - Styled file upload with webcam capture, URL import, and security presets](art/sc-31.png)](https://flex-fields.bjanczak.com/docs/flexfileupload-and-fleximageupload)FlexFileUpload — Webcam & URL File Import [![IconPickerField - Highly optimized searchable SVG icon picker with virtual scrolling, asynchronous preview loading, and WAI-ARIA combobox accessibility](art/sc-32.png)](https://flex-fields.bjanczak.com/docs/icon-picker-field)IconPickerField — Virtual Scrolling & W3C ARIA [![And More - Overview of the interactive Developer Playground displaying form fields, custom layouts, and UI components in Filament Flex Fields](art/more.png)](art/more.png)And More — 70 Components & Visual Playground --- Custom Components (70) ---------------------- [](#custom-components-70) Every item below is a **custom class shipped by this package** — own Blade views, CSS, and configuration API. This list does **not** include native Filament fields (`TextInput`, `TagsInput`, `Repeater`, etc.) used only as passthrough inside `FlexFieldFormBuilder`. Full API for each component: ****. ### Text & input (13) [](#text--input-13) ComponentDescription[`FlexTextInput`](https://flex-fields.bjanczak.com/docs/flextextinput)Enhanced text input — speech dictation, emoji picker, password strength, clearable[`FlexTextareaField`](https://flex-fields.bjanczak.com/docs/flextextareafield)Animated autosizing textarea with character counter[`FlexRichEditor`](https://flex-fields.bjanczak.com/docs/flex-rich-editor)JSON-first rich editor — responsive images, limits, fullscreen, autosave, optional Spatie[`PhoneField`](https://flex-fields.bjanczak.com/docs/phonefield)International phone input with libphonenumber validation[`CountryField`](https://flex-fields.bjanczak.com/docs/countryfield)Searchable country picker with flags[`TimezoneField`](https://flex-fields.bjanczak.com/docs/timezonefield)IANA timezone picker with UTC offset display[`LinkPreviewField`](https://flex-fields.bjanczak.com/docs/link-preview-field)URL input with live Open Graph preview card (horizontal, vertical, or full-width layouts)[`BarcodeScannerField`](https://flex-fields.bjanczak.com/docs/barcode-scanner-field)Barcode/QR input — Filament modal camera scanner, format whitelist, EAN/UPC checksum, hybrid BarcodeDetector + ZXing, torch & front/back switch, iOS-safe preview *(v2.6.0)*[`SocialLinksField`](https://flex-fields.bjanczak.com/docs/social-links-field)Social profile links — platform picker, URL validation, custom platforms, reorder[`SlugField`](https://flex-fields.bjanczak.com/docs/slugfield-and-titleslugfield)Slug input with permalink preview, uniqueness, regenerate/copy actions[`TitleSlugField`](https://flex-fields.bjanczak.com/docs/slugfield-and-titleslugfield)Title + slug pair with live URL preview and optional Spatie Sluggable[`AddressAutocompleteField`](https://flex-fields.bjanczak.com/docs/addressautocompletefield)Mapbox-powered address search with structured storage[`FlexVerificationCode`](https://flex-fields.bjanczak.com/docs/flexverificationcode)OTP / 2FA verification code input with grouping### Number & range (7) [](#number--range-7) ComponentDescription[`NumberStepper`](https://flex-fields.bjanczak.com/docs/numberstepper)+/- numeric stepper control[`CalculatorField`](https://flex-fields.bjanczak.com/docs/calculator-field)Numeric input with shared iOS-style calculator panel and per-field session memory *(v2.8.1)*[`CurrencyField`](https://flex-fields.bjanczak.com/docs/currencyfield)Multi-currency money input with locale-aware formatting[`FlexSlider`](https://flex-fields.bjanczak.com/docs/flexslider)Styled range slider with value display[`TrackSlider`](https://flex-fields.bjanczak.com/docs/trackslider)Track-style slider — single value, percentage, or min/max range[`PriceRangeField`](https://flex-fields.bjanczak.com/docs/pricerangefield)Dual-handle price filter with histogram[`TrafficSplit`](https://flex-fields.bjanczak.com/docs/trafficsplit)Weighted segment split control (A/B-style traffic allocation)### Choice & selection (14) [](#choice--selection-14) ComponentDescription[`SwitchField`](https://flex-fields.bjanczak.com/docs/switchfield)Animated toggle switch with row/inline layouts[`CellSwitch`](https://flex-fields.bjanczak.com/docs/switchfield)Compact `SwitchField` variant for table cells[`SegmentControl`](https://flex-fields.bjanczak.com/docs/segmentcontrol)Segmented button control[`ChoiceCards`](https://flex-fields.bjanczak.com/docs/choicecards)Rich card-based radio selection[`ChoiceCheckboxCards`](https://flex-fields.bjanczak.com/docs/choicecheckboxcards)Rich card-based multi-select[`FlexChecklist`](https://flex-fields.bjanczak.com/docs/flexchecklist)Animated checklist with icons and descriptions[`FlexRadiolist`](https://flex-fields.bjanczak.com/docs/flexradiolist)Animated radio list with icons and descriptions[`MatrixChoiceField`](https://flex-fields.bjanczak.com/docs/matrixchoicefield)Survey / configurator matrix grid — radio or checkbox per row[`FlexMatrixTable`](https://flex-fields.bjanczak.com/docs/flex-matrix-table)Advanced matrix grid with full Filament components inside cells[`SelectField`](https://flex-fields.bjanczak.com/docs/selectfield)Rich select with avatars, badges, and descriptions[`UserSelect`](https://flex-fields.bjanczak.com/docs/userselect)User picker with avatar stacks and verification badges[`DualListboxField`](https://flex-fields.bjanczak.com/docs/duallistboxfield)Two-panel reorderable transfer list[`TagsField`](https://flex-fields.bjanczak.com/docs/tags-field)Tag input — pills below the field with inline remove buttons[`IconPickerField`](https://flex-fields.bjanczak.com/docs/icon-picker-field)Searchable blade-icons picker with lazy SVG rendering, virtual scroll, and paginated search *(v2.7.0)*[`FlexSpatieTagsField`](https://flex-fields.bjanczak.com/docs/tags-field)Spatie Tags integration for `TagsField`### Date & time (11) [](#date--time-11) ComponentDescription[`FlexDateField`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Segmented date input without calendar popover[`FlexDatePicker`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Date picker with calendar popover[`FlexTimeField`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Segmented time input (12h / 24h, seconds optional)[`FlexTimeSegmentsField`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Dropdown time picker (hour / minute columns, `HH:MM`)[`ScheduleField`](https://flex-fields.bjanczak.com/docs/schedule-field)Weekly opening-hours editor — day toggles, slots, breaks, copy-to-weekdays, timezone[`FlexDateTimePicker`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Combined date + time picker[`FlexDateRangeField`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Start/end date range[`FlexDurationField`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Duration input (hours / minutes)[`FlexTimeRangeField`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Start/end time range[`FlexMonthPicker`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Month picker[`FlexYearPicker`](https://flex-fields.bjanczak.com/docs/date-and-time-fields)Year picker### Media, color & location (12) [](#media-color--location-12) ComponentDescription[`ColorSwatchField`](https://flex-fields.bjanczak.com/docs/colorswatchfield)Preset color swatch picker[`FlexColorPickerField`](https://flex-fields.bjanczak.com/docs/flexcolorpickerfield)Advanced color picker with grid and eyedropper[`FlexFileUpload`](https://flex-fields.bjanczak.com/docs/flexfileupload-and-fleximageupload)Styled file upload with webcam capture, URL import, and security presets *(v2.6.1)*[`FlexImageUpload`](https://flex-fields.bjanczak.com/docs/flexfileupload-and-fleximageupload)Image upload with processing options[`FlexSpatieMediaLibraryFileUpload`](https://flex-fields.bjanczak.com/docs/flexfileupload-and-fleximageupload)Spatie Media Library upload integration[`VideoField`](https://flex-fields.bjanczak.com/docs/videofield)Video URL / player with YouTube support[`AudioField`](https://flex-fields.bjanczak.com/docs/audiofield)Audio URL / player with waveform[`VoiceNoteRecorderField`](https://flex-fields.bjanczak.com/docs/voicenoterecorderfield)In-browser voice recorder — waveform, local playback, deferred or immediate upload[`MapPickerField`](https://flex-fields.bjanczak.com/docs/mappickerfield)Interactive map pin picker with draggable marker and address autofill[`SignatureField`](https://flex-fields.bjanczak.com/docs/signaturefield)Canvas signature pad[`CreditCardField`](https://flex-fields.bjanczak.com/docs/creditcardfield)Card preview with Luhn validation and CVV flip[`CellSlider`](https://flex-fields.bjanczak.com/docs/trackslider)Compact `TrackSlider` variant for table cells### Rating (2) [](#rating-2) ComponentDescription[`RatingField`](https://flex-fields.bjanczak.com/docs/ratingfield)Star rating input[`NpsField`](https://flex-fields.bjanczak.com/docs/nps-field)NPS, CSAT & Likert survey scales — pills, segments, and emoji variants *(v2.8.0)*### Layout & display — schemas (9) [](#layout--display--schemas-9) ComponentDescription[`SegmentTabs`](https://flex-fields.bjanczak.com/docs/segmenttabs)Tabbed segment navigation for forms[`TranslatableFields`](https://flex-fields.bjanczak.com/docs/translatablefields)Locale tabs wrapping any fields (JSON or Spatie Translatable)[`TranslatableTabs`](https://flex-fields.bjanczak.com/docs/translatablefields)Legacy alias for `TranslatableFields`[`ItemCard`](https://flex-fields.bjanczak.com/docs/itemcard)Single settings-style card row[`ItemCardGroup`](https://flex-fields.bjanczak.com/docs/itemcardgroup)Polished card-based settings group[`ItemCardStack`](https://flex-fields.bjanczak.com/docs/itemcardstack)Stacked card layout for profile / settings pages[`CoverCard`](https://flex-fields.bjanczak.com/docs/covercard)Hero cover card for tabbed editors[`ProgressBar`](https://flex-fields.bjanczak.com/docs/progressbar)Linear, pill, or segment progress bar[`ProgressCircle`](https://flex-fields.bjanczak.com/docs/progresscircle)Circular or semicircle progress indicatorReady-made layout recipes: [Form layout patterns](https://flex-fields.bjanczak.com/docs/index#form-layout-patterns). ### Table columns (3) [](#table-columns-3) ComponentDescription[`UserColumn`](https://flex-fields.bjanczak.com/docs/usercolumn)Avatar + name/email display with hover card[`RatingColumn`](https://flex-fields.bjanczak.com/docs/ratingcolumn)Star rating display in Filament tables[`IconColumn`](https://flex-fields.bjanczak.com/docs/iconcolumn)Blade-icons display for `IconPickerField` values *(v2.7.0)***Total: 70 custom components** (58 form fields + 9 layout/schema + 3 table columns). **HoldConfirmAction** (press-and-hold Filament actions) is documented in the playground but not counted in the 70. --- Use cases --------- [](#use-cases) ScenarioRecommended components**CRM / SaaS custom attributes**JSON flex fields + `PhoneField`, `CountryField`, `UserSelect`**CMS / page builder**`TitleSlugField`, `TranslatableFields`, `FlexFileUpload`, `FlexImageUpload`**Product configurator**`MatrixChoiceField`, `ChoiceCards`, `PriceRangeField`, `ColorSwatchField`**Surveys & assessments**`NpsField`, `MatrixChoiceField`, `FlexRadiolist`, `RatingField`**SaaS onboarding**`ChoiceCards`, `SegmentTabs`, `CoverCard`, `ProgressCircle`**E-commerce filters**`PriceRangeField`, `TrackSlider`, `DualListboxField`, `CalculatorField`**User profile settings**`ItemCardGroup`, `PhoneField`, `TimezoneField`, `SignatureField`**Payment forms**`CreditCardField`, `FlexVerificationCode`**Location services**`MapPickerField`, `AddressAutocompleteField`**A/B configuration**`TrafficSplit`, `SegmentControl`--- Requirements ------------ [](#requirements) DependencyVersionPHP8.3+Laravel11+Filament5.x (`filament/filament ^5.0`)**Optional integrations** (see `composer.json` → `suggest`): PackageUsed for`spatie/laravel-sluggable`Model-based slug generation in `SlugField``spatie/laravel-translatable`JSON translation storage for translatable titles`spatie/laravel-medialibrary``FlexSpatieMediaLibraryFileUpload``filament/spatie-laravel-media-library-plugin`Filament base class for media upload`spatie/laravel-tags``FlexSpatieTagsField` — sync tags on models using `HasTags`--- Installation ------------ [](#installation) Already ran [Quick start](#quick-start)? Jump to [Setup](#setup). For version bumps, see [Upgrading](#upgrading). Below: Packagist install, monorepo path repo, and optional Composer automation. ### Composer (Packagist) [](#composer-packagist) ``` composer require janczakb/filament-flex-fields php artisan filament:assets ``` ### Composer (path repository — monorepo) [](#composer-path-repository--monorepo) ``` { "repositories": [ { "type": "path", "url": "packages/filament-flex-fields" } ], "require": { "janczakb/filament-flex-fields": "@dev" } } ``` ``` composer require janczakb/filament-flex-fields:@dev php artisan filament:assets ``` Auto-discovered via `composer.json` → `extra.laravel.providers`. **Asset sync on every Composer run** — optional but recommended; see [Automate asset sync](#automate-asset-sync-recommended) in [Upgrading](#upgrading). ``` "scripts": { "post-autoload-dump": [ "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", "@php artisan package:discover --ansi", "@php artisan filament:assets --ansi" ] } ``` --- Setup ----- [](#setup) ### 1. Register the plugin [](#1-register-the-plugin) ``` use Bjanczak\FilamentFlexFields\FilamentFlexFieldsPlugin; public function panel(Panel $panel): Panel { return $panel->plugin(FilamentFlexFieldsPlugin::make()); } ``` ### 2. Publish configuration (optional) [](#2-publish-configuration-optional) ``` php artisan vendor:publish --tag=filament-flex-fields-config ``` ### 3. Publish translations (optional) [](#3-publish-translations-optional) Built-in locales ship with the package (`en`, `pl`). Publish them only when you need to customize strings in your app: ``` php artisan vendor:publish --tag=filament-flex-fields-translations ``` Files are copied to: ``` lang/vendor/filament-flex-fields/ ├── en/ │ ├── default.php │ ├── countries.php │ ├── currencies.php │ └── timezones.php └── pl/ ├── default.php ├── countries.php └── timezones.php ``` **Why `lang/vendor/`?** Laravel resolves package translation overrides only from `lang/vendor/{namespace}/` (see `FileLoader::loadNamespaceOverrides`). A flat path such as `lang/filament-flex-fields/` is **not** picked up for `__('filament-flex-fields::...')` unless you add custom loader logic. The `vendor` segment here is Laravel’s convention for published package lang files — it is not Composer’s `vendor/` directory. #### Translation files [](#translation-files) FilePurpose`default.php`UI labels (placeholders, buttons, validation copy, search hints)`countries.php`Country names for `CountryField` / `PhoneField``currencies.php`Currency names for `CurrencyField``timezones.php`Optional timezone name overrides for `TimezoneField`**Timezone names** resolve in this order: 1. `timezones.php` override (`Europe/Warsaw` → key `Europe__Warsaw`) 2. PHP `Intl` for the active locale (requires `ext-intl`) 3. Humanized IANA identifier (`America/New_York` → `New York`) The field renders `{name} (UTC±HH:MM)` — only the name uses the chain above; offset is computed at runtime. You usually **do not** need to publish `timezones.php` unless you want custom wording. Example override: ``` // lang/vendor/filament-flex-fields/pl/timezones.php return [ 'Europe__Warsaw' => 'Warszawa', ]; ``` Without publishing, the package uses its bundled translations automatically. #### Adding a new locale [](#adding-a-new-locale) 1. Copy the structure from `vendor/janczakb/filament-flex-fields/resources/lang/en/`. 2. Create `lang/vendor/filament-flex-fields/{locale}/` with the files you need (`default.php` is usually enough to start). 3. Add `timezones.php` only for manual timezone wording overrides. 4. Set `app.locale` / Filament panel locale to your new locale. You do **not** need to register anything else — `filament-flex-fields::…` lines resolve automatically. #### Updating translations after a plugin upgrade [](#updating-translations-after-a-plugin-upgrade) You usually **do not** need to re-publish translations when you update the package. Laravel loads translations in two layers: 1. Built-in files from the package (`resources/lang` inside the plugin) 2. Your overrides from `lang/vendor/filament-flex-fields/` merged on top with `array_replace_recursive` That means: - **New keys** added in a new plugin version appear automatically, even if your published `default.php` is older and does not contain them yet. - **Keys you customized** in `lang/vendor/...` keep your wording. - **Keys you never published/overrode** always follow the latest built-in package text. - **Timezone list labels** follow PHP `Intl` by default, so new IANA zones work without updating lang files. **Recommended workflow** SituationWhat to doYou never published translationsRun `composer update` only — new keys work out of the boxYou customized a few stringsKeep your `lang/vendor/...` files; do not re-publish with `--force`You want to customize a new key from an upgradeCopy that key from `vendor/janczakb/filament-flex-fields/resources/lang/{locale}/` into your published fileYou need new country/currency keys in a published fileDiff package `countries.php` / `currencies.php` and append only missing keys to your copyYou want custom timezone wordingAdd only those zones to published `timezones.php`Re-run `vendor:publish --tag=filament-flex-fields-translations` only when you want a fresh file template. **Avoid `--force`** unless you intend to overwrite your edits. ### 4. Mapbox geocoding (MapPicker & AddressAutocomplete) [](#4-mapbox-geocoding-mappicker--addressautocomplete) Set `MAPBOX_ACCESS_TOKEN` in `.env`. By default **`use_server_proxy` is `true`** — geocoding requests go through authenticated Laravel routes so the token never ships to the browser for search/reverse geocode: ``` MAPBOX_ACCESS_TOKEN=pk.… FLEX_FIELDS_MAPBOX_SERVER_PROXY=true FLEX_FIELDS_MAPBOX_CACHE_TTL=3600 FLEX_FIELDS_MAPBOX_RATE_LIMIT=60 ``` Proxy routes use `web` + `auth` middleware by default (`config/filament-flex-fields.php` → `mapbox.proxy_middleware`). Disable the proxy only when you intentionally expose a public Mapbox token client-side. **Field API highlights:** `searchTypes()`, `language()`, `minSearchLength()`, `searchDebounce()`, `streetAddressesOnly()`. See [MapPickerField](https://flex-fields.bjanczak.com/docs/mappickerfield) and [AddressAutocompleteField](https://flex-fields.bjanczak.com/docs/addressautocompletefield). ### 5. Flex field audit trail (enabled by default) [](#5-flex-field-audit-trail-enabled-by-default) ``` # Enabled by default — set false to disable FLEX_FIELDS_AUDIT_ENABLED=true FLEX_FIELDS_AUDIT_COLUMN=flex_field_audit ``` `HasFlexFields` records value changes (user, timestamp, field key, old/new snapshot) in the configured JSON column. ### 6. Flex fields on a model (optional) [](#6-flex-fields-on-a-model-optional) ``` use Bjanczak\FilamentFlexFields\Concerns\HasFlexFields; class Product extends Model { use HasFlexFields; protected $casts = [ 'flex_field_values' => 'array', ]; } ``` Define schemas in `config/filament-flex-fields.php` or `FlexFieldSchemaRegistry`, then build with `FlexFieldFormBuilder`. --- Quick usage ----------- [](#quick-usage) ### Standalone form components [](#standalone-form-components) ``` use Bjanczak\FilamentFlexFields\Filament\Forms\Components\ChoiceCards; use Bjanczak\FilamentFlexFields\Filament\Forms\Components\MatrixChoiceField; use Bjanczak\FilamentFlexFields\Filament\Forms\Components\PhoneField; use Bjanczak\FilamentFlexFields\Filament\Forms\Components\TitleSlugField; ChoiceCards::make('plan') ->options(['basic' => 'Basic', 'pro' => 'Pro']) ->required(); MatrixChoiceField::make('priorities') ->mode('checkbox') ->rows(['dark_mode' => 'Dark mode', 'csv_export' => 'CSV export']) ->matrixColumns(['low' => 'Low', 'medium' => 'Medium', 'high' => 'High']) ->disableCellWhen('csv_export', 'high', 'dark_mode', 'high'); PhoneField::make('phone')->defaultCountry('PL'); TitleSlugField::make('title', 'slug') ->permalinkPreview() ->slugUnique(); ``` Full API for every option: ****. ### Schema / display components [](#schema--display-components) ``` use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCardGroup; use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ProgressCircle; ProgressCircle::make() ->value(72) ->displayValue('72%') ->variant('semicircle'); ItemCardGroup::make([ // Polished card-based settings rows… ]); ``` --- Playground ---------- [](#playground) A dev UI page previews every custom component. SettingEnv variableDefaultPlugin enabled`FLEX_FIELDS_ENABLED``true`Playground`FLEX_FIELDS_PLAYGROUND``true` when `APP_ENV=local`Nav group`FLEX_FIELDS_PLAYGROUND_NAV_GROUP``Settings & Tools`Nav sort`FLEX_FIELDS_PLAYGROUND_NAV_SORT``91```` FLEX_FIELDS_PLAYGROUND=false ``` Example slugs: `matrix-choice`, `choice-cards`, `tags-field`, `title-slug-field`, `phone-field`, `file-upload`, `item-card-group`, `progress-circle`. --- Documentation ------------- [](#documentation) DocumentContents****Complete per-component API — every method, option, validation rule, config key, and example****Asset pipeline, overlay coordinator, `wire:ignore` + Livewire sync patterns**[CHANGELOG.md](CHANGELOG.md)**Version history and release notes**config/filament-flex-fields.php**Schemas, UI defaults, playground, Mapbox, audit--- FAQ --- [](#faq) **Why choose Flex Fields over multiple Filament field plugins?**One design system, one asset pipeline, one Playground, and **70** components that work together — standalone or as dynamic JSON attributes. You avoid conflicting CSS, duplicate JS, and inconsistent field APIs. **Do I need Node.js to use this package?**No. Pre-built CSS/JS are committed to `resources/dist/`. **How does asset loading work?**Each component loads its own CSS/JS on demand. Shared libraries are split into cached chunks and loaded once per page. See [Performance-first assets](#performance-first-assets). **Can I use components without the JSON flex-field system?**Yes. Import any component directly into Filament forms — the JSON column and `HasFlexFields` trait are optional. **How many components are included?****70** custom UI classes with own views and CSS — listed in [Custom Components (70)](#custom-components-70). **Does it work with Filament v4?**No — this package targets **Filament v5** only. **Is Spatie required?**No. Sluggable, Translatable, and Media Library integrations are optional `composer suggest` packages. **Where is the Matrix Choice / survey grid?**`MatrixChoiceField` — radio or checkbox mode, per-row validation, reactive `disableCellWhen()` / `disableRowWhen()`. See . --- Performance-first assets ------------------------ [](#performance-first-assets) This is the technical reference for [Lazy assets & shared chunks](#lazy-assets--shared-chunks) above. #### CSS delivery pipeline [](#css-delivery-pipeline) StepClass / fileRole1Field blade `@include(…load-stylesheet)`Registers needed bundles when the field is on the page2`FlexFieldStylesheetQueue` / `FlexFieldAlpineQueue`Request-scoped dedup — 5× `ChoiceCards` → 1× `choice-cards.css`3`emit-assets` (via `load-stylesheet`)Full-page: `@push('styles')` into ``; Livewire partial: inline `` / `modulepreload` batches4`queued-stylesheets` render hookFlushes any remaining `pending()` queues at `STYLES_AFTER` and `BODY_END`5Filament `@stack('styles')` in `layout/base.blade.php`Renders pushed links in `` before content paint6`flex-field-asset-injector.js`SPA/morph: loads missing lazy assets, dedupes hrefs, prevents modal FOUC7`loadedOnRequest()` on Filament CSS assetsPrevents unused bundles from auto-loading via `@filamentStyles`Dependency order is declared in `FlexFieldAssets::STYLESHEET_DEPENDENCIES` and resolved depth-first in `stylesheetsFor()` (e.g. `schedule-field` → `timezone-field` → `flex-time-segments`). #### JavaScript delivery pipeline [](#javascript-delivery-pipeline) StepClass / fileRole1`x-load` + thin `{component}.js` entryAlpine factory only — heavy libs in shared chunks2esbuild `splitting: true` + semantic chunk names`flex-fields-phone-lib-*`, `flex-fields-emoji-*`, …3`alpine-manifest.json`Maps each field → chunk list for preload4`FlexFieldAlpineQueue`Dedup `modulepreload` in `` — one fetch per chunk per request5`flex-field-asset-injector.js`Loads missing chunks from morph batches; in-flight promise cache prevents duplicate fetches6Dynamic `import()` where possiblee.g. libphonenumber, emoji picker — parse cost deferred until interaction#### Bundle inventory [](#bundle-inventory) Pre-built assets ship in `resources/dist/`. The table below lists sample bundle sizes (raw + gzip KB). Full metrics are in [`resources/dist/bundle-metrics.json`](resources/dist/bundle-metrics.json). JS = entry + preloaded chunks from `alpine-manifest.json`; CSS `+ deps` = declared stylesheet dependencies. Field / componentJS (KB)CSS (KB)core (always)—25.4 (gzip 5.5)PhoneField5.9 (gzip 1.9) + virtualized-list 7.3 (gzip 2.5) + select-menu 5.4 (gzip 1.9) + flex-dropdown-coordinator 1.7 (gzip 0.8) + theme-utils 0.5 (gzip 0.3) + phone-lib 185 (gzip 43.3)32.2 (gzip 6.4) + deps 68.2CountryField3.9 (gzip 1.4) + virtualized-list 7.3 (gzip 2.5) + select-menu 5.4 (gzip 1.9) + flex-dropdown-coordinator 1.7 (gzip 0.8) + theme-utils 0.5 (gzip 0.3)28.5 (gzip 5.9) + deps 68.2FlexTextInput10.6 (gzip 3.2) + flex-dropdown-coordinator 1.7 (gzip 0.8) + emoji 19.7 (gzip 6.2) lazy40.1 (gzip 7.3) + deps 22.4TagsField3.1 (gzip 1.1)23.3 (gzip 5.2) + deps 65.3RatingField0.7 (gzip 0.3)25.4 (gzip 5.6)SwitchFieldAlpine inline43.9 (gzip 7.6)UserSelect14.6 (gzip 4.8) + select-menu 5.4 (gzip 1.9) + theme-utils 0.5 (gzip 0.3) + flex-dropdown-coordinator 1.7 (gzip 0.8)31.9 (gzip 6.3) + deps 159.6MapPickerField9.3 (gzip 2.9) + mapbox 6.1 (gzip 2.3) + select-menu 5.4 (gzip 1.9) + flex-dropdown-coordinator 1.7 (gzip 0.8) + theme-utils 0.5 (gzip 0.3)29.7 (gzip 6.5) + deps 52.5SelectField14.6 (gzip 4.8) + select-menu 5.4 (gzip 1.9) + theme-utils 0.5 (gzip 0.3) + flex-dropdown-coordinator 1.7 (gzip 0.8)82.1 (gzip 12.7) + deps 28.1Sample bundles (10 of **59** production CSS files). Full per-file metrics — every component, shared chunk, and gzip size — live in [`resources/dist/bundle-metrics.json`](resources/dist/bundle-metrics.json) (regenerated on `npm run build`). JS = entry + preloaded chunks from `alpine-manifest.json`; CSS `+ deps` = declared stylesheet dependencies. --- See [LICENSE](LICENSE) for license details. Third-party attributions: [CREDITS.md](CREDITS.md). Made with ❤️ by [Bartłomiej Janczak](mailto:barek122@gmail.com) ### Health Score 56 — FairBetter than 97% of packages Maintenance97 Actively maintained with recent releases Popularity38 Limited adoption so far Community13 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 94.7% 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 ~1 days Total 38 Last Release 15d ago Major Versions v1.2.1 → v2.1.62026-06-14 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/4959534?v=4)[Bartłomiej Janczak](/maintainers/janczakb)[@janczakb](https://github.com/janczakb) --- Top Contributors [![janczakb](https://avatars.githubusercontent.com/u/4959534?v=4)](https://github.com/janczakb "janczakb (71 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)") --- Tags custom-fieldsdynamic-formsfilamentfilament-pluginfilamentphpform-builderform-componentsjson-storagelaravellaravel-packageui-kitlaravellazy loadinggeocodingtranslatablecustom fieldsFormsfilamentfilament-pluginfilament-formstailwindcssadmin-panelalpinejsfilament-v5phone-inputmap-pickerdynamic-fieldsaddress autocompleteform-componentsmapboxcms fieldsjson-attributescountry-pickerflex-fieldsmatrix-choicechoice-cardsslug-fieldcurrency-fieldinternational-phonecode-splitting ### Code Quality TestsPest Static AnalysisPHPStan Type Coverage Yes ### Embed Badge ![Health badge](/badges/janczakb-filament-flex-fields/health.svg) ``` [![Health](https://phpackages.com/badges/janczakb-filament-flex-fields/health.svg)](https://phpackages.com/packages/janczakb-filament-flex-fields) ``` ### Alternatives [relaticle/custom-fields User Defined Custom Fields for Laravel Filament 16354.2k](/packages/relaticle-custom-fields)[riodwanto/superduper-filament-starter-kit A comprehensive Laravel Filament 3 💡 starter kit with pre-installed plugins, admin panel, user management, SEO tools, theme customization, and content management for rapid application development 2798.6k](/packages/riodwanto-superduper-filament-starter-kit)[watheqalshowaiter/filament-sticky-table-header A Filament plugin that makes table headers stick when scrolling down for better UX. 3551.8k](/packages/watheqalshowaiter-filament-sticky-table-header)[mradder/filament-logger Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels. 2318.8k](/packages/mradder-filament-logger)[openplain/filament-tree-view Tree view for Filament resources - drop-in replacement for Table with drag-and-drop hierarchical data management 3628.2k](/packages/openplain-filament-tree-view)[a909m/filament-statefusion Filament StateFusion is a powerful FilamentPHP plugin that seamlessly integrates Spatie Laravel Model States into the Filament admin panel. This package provides an intuitive way to manage model states, transitions, and filtering within Filament, enhancing the user experience and developer productivity. 3019.0k2](/packages/a909m-filament-statefusion) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)