janczakb/filament-flex-fields

FLEX Fields
Advanced form components for Filament 5

79+ components for Filament 5. One design system. One media workflow.

Build consistent Laravel admin forms with advanced Filament controls and configurable JSON custom fields.
Media OS connects uploads, image processing and multilingual file information,
while active controls load and share their required CSS and JavaScript.
Optional Spatie integrations work with the models your application already uses.

Explore all components  ·  Installation  ·  Licensing

_{FLEX Fields v4 is available on Packagist for Filament 5.}

Watch the FLEX Fields v4 component showcase · 4:26 →
_{See real components in action: pickers, uploads, image editing, maps, signatures and more.}

Configure one field, including with AI

Keep your existing Filament Resource, models and native fields. FLEX includes optional Laravel Boost guidance and a focused development skill, plus read-only discovery of installed component declarations and PHP examples. Your application keeps its policies and persistence flow.

AI-assisted development · Your first saved component · Native, custom or FLEX?

Why choose FLEX Fields?

Use individual fields with ordinary model attributes, or add managed JSON custom field groups for configurable product attributes, CRM data and tenant settings. Managed custom fields are stored as JSON, without an EAV schema; the JSON layer is optional.

See what you can build

Content in your users' languages Switch locales and edit translated fields in one editing flow. Explore multilingual fields →	Business hours, ready to configure Weekly time slots and breaks, with matching table and infolist displays. Explore weekly schedules →
Capture a signature inside the form Touch, stylus and mouse input, with ink controls, undo, redo and export options. Explore signature capture →	Make feedback easy to give NPS, CSAT and Likert controls with segmented, pill and emoji presentations. Explore ratings and surveys →

Explore the interfaces in the live demo →

Filament file uploads, powered by Media OS

Choose how files enter your form, which image versions you generate, and which previews and metadata your users see. Media OS connects these settings across FLEX upload and capture tools.

One product-photo workflow

Add product photos through file selection, URL import or camera capture. Configure named WebP image conversions, generate them in a worker when required, and use a chosen thumbnail conversion in the avatar, grid or list. Open the fullscreen viewer for a closer look and, when enabled, edit file information alongside it.

Native Media OS generates image variants without Media Library. Spatie mode uses your model's collections and conversions. Queued processing requires a running worker; image generation requires an encoder supporting the chosen format. Originals are retained, and previews can use the available original while a conversion is pending.

For application-specific workflows, configure staging, recovery and cleanup, custom filenames, PHP lifecycle callbacks, processors and scanner hooks. You can attach your own scanning service; FLEX does not bundle an antivirus engine.

Media OS guide · Image conversions & workers · File information · Events & recovery

Automatic media cleanup schedules

In v4, FLEX registers flex-fields:prune-media-staging hourly and flex-fields:prune-media-conversions daily, even when no media field is rendered. Disable their automatic registration independently in config/filament-flex-fields.php:

'media_capture' => [
    'staging' => ['schedule_enabled' => false],
    'images' => ['queue' => ['prune_schedule_enabled' => false]],
],

Merge these values into the existing configuration; keep your other settings. Capture-media retention is separate: FLEX_FIELDS_RETENTION_SCHEDULE=false disables its schedule only. Commands remain available for manual execution or your own scheduler. Rebuild cached configuration with php artisan config:cache; maintain the required cleanup for the media features you use. Full schedule and opt-out reference.

Live calculations, checked before saving

Connect prices, quantities, discounts and taxes with reusable calculation plans. CalculatedFields binds those plans to your form controls, keeps dependent results in sync and recalculates outputs in PHP during form saving. Submitted totals are replaced by results calculated from validated inputs.

Define input limits, choose the allowed functions and reuse the same FormulaEngine plan in services or actions. Chained formulas resolve in dependency order, and cyclic dependencies are rejected when the plan is created.

Explore calculated fields and formula validation →

Intelligent asset loading

FLEX loads the resources required by active controls and shares dependencies across instances. Inactive tabs, wizard steps and closed dialogs wait until activation; each field keeps its own configuration and state.

Editors, capture tools and other optional features follow each field's configuration. Every FLEX-enabled panel has a shared runtime and base styles. The package includes prebuilt browser assets, so normal use needs no FLEX Node.js build or custom Tailwind compilation.

How asset loading works → · Requirements & dependencies →

flowchart TB
    start(["START<br/>Application boot"]) --> definitions

    subgraph planning["1. Server: registration and rendering"]
        definitions["Register typed component definitions"] --> validated["Validate the dependency graph<br/>and CSS ownership"]
        validated --> features["Render fields and displays<br/>with their enabled features"]
        features --> plans["Resolve cached resource plans<br/>for those requirements"]
        plans --> boundaries["Emit independent instance boundaries<br/>and shared plan descriptions"]
    end

    subgraph loading["2. Browser: activation, loading and readiness"]
        boundaries --> activity{"Area active<br/>or parent dialog retained?"}
        activity -->|No| waiting["Wait for tab, step<br/>or dialog activation"]
        waiting -.->|Activated| activity
        activity -->|Yes| owners["Retain this instance's<br/>resource requirements"]
        owners --> queue["Required work first<br/>bounded loading and prefetch"]
        queue --> shared["Reuse loaded resources<br/>and pending requests"]
        shared --> css["CSS ready"]
        shared --> modules["Modules ready"]
        css --> init["Await each instance's init"]
        modules --> init
        init --> ready(["READY<br/>Usable controls with independent state"])
    end

    subgraph lifecycle["3. Changes, recovery and cleanup"]
        owners -.->|Activity or configuration changes| events["Tab and dialog events<br/>Livewire morph and navigation"]
        events -.->|Render or replace| features
        events -.->|Change activity| activity
        events -.->|Close / deactivate| release["Release resource interests<br/>cancel pending surface work"]
        events -.->|Unmount| cleanup["Cancel instance waits<br/>dispose registered effects"]
        release --> retained
        cleanup --> retained["Keep resources still in use<br/>ignore outdated completions"]
        retained -.->|Reconcile current instances| activity
        shared -.->|Loading failure| retry["Error state and retry"]
        init -.->|Initialization failure| retry
        retry -.->|Recheck failed roots| activity
    end

    classDef milestone stroke:#7964E8,stroke-width:3px,font-weight:bold;
    class start,ready milestone;

Four optional Spatie integrations

Keep the data models your project already uses. Install and configure each integration only when you need it.

Disk-backed media, plain tags and translation maps also have modes that do not require Spatie.

Installation

Start with PHP 8.3+ and an existing Filament 5.6+ panel, using compatible Laravel and Livewire versions.

[!NOTE] FLEX Fields v4 is available on Packagist. See the release notes when updating an existing installation.

1. Install the package.

composer require janczakb/filament-flex-fields:"^4.0"

2. Register FLEX in your existing panel provider.

use Bjanczak\FilamentFlexFields\FilamentFlexFieldsPlugin;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // Keep your existing panel configuration.
        ->plugin(FilamentFlexFieldsPlugin::make());
}

3. Publish the included browser assets.

php artisan filament:assets

Start with Your first component for a walkthrough of adding, validating, saving and reopening a field.

Advanced example: queued WebP image variants

This disk-backed image upload adds two WebP variants and a thumbnail preview to an existing form. It requires configured storage, a JSON attribute with an array cast, and a running queue worker.

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexImageUpload;
use Bjanczak\FilamentFlexFields\Support\Media\Images\ImageConversion;

FlexImageUpload::make('photos')
    ->multiple()
    ->uploadLayout('grid')
    ->disk('public')
    ->directory('products')
    ->maxSize(10240)
    ->imageConversions([
        new ImageConversion('thumb', width: 250, height: 250),
        new ImageConversion('large', width: 1500, height: 1500),
    ])
    ->queueImageConversions()
    ->previewConversion('thumb');

ImageConversion defaults to WebP and fits within the specified bounds without upscaling. The field stores multiple disk paths in the JSON attribute. Spatie uploads instead define their conversions on the media model.

Standalone fields do not require managed JSON field groups. The provider registers package migrations, so review pending migrations through your normal deployment process.

Full installation · Saving & validation · Configuration · Updating

Find the solution your application needs

Component catalog

79+ components, grouped by purpose. Browse the public fields, layout components and display surfaces below. Each group links to its configuration guides; legacy aliases and abstract base classes are excluded.

Form fields and controls

Layouts, tables, infolists and actions

For custom compositions, CompositeField and the extension guides show how to reuse controls with their configuration, renderers and assets.

Questions before you install

Licensing

Source-available, with permitted free use. All plans provide the same package features. Choose by how you use the software, who owns the application and whether you distribute it.

Prices are USD, excluding applicable taxes. Standard paid plans provide perpetual use within their licensed scope, with no mandatory renewal. Enterprise Group does not include OEM or external customer-installation rights. Public source access is not an unrestricted open-source grant.

Free also covers qualifying internal tools for your own company. It is not limited to students or non-profit organizations. A commercial software product or SaaS needs the appropriate commercial grant. Standard plans include subsequent official updates, including major versions of FLEX Fields; separate packages such as FLEX Forms are not included. Previously issued licenses retain their agreed terms.

Compare plans · Full license terms · Buy a standard license · License guide / Custom enquiries

Build your next Filament form with FLEX

Find the component your application needs. Try its interface, choose your configuration and follow a working example.

Try the live demo · Read the documentation · Get started

Changelog · Report an issue · Support · Contributing · Code of conduct

If FLEX helps your project, star the repository to help other Filament developers discover it.

© 2026 Bartłomiej Janczak. Third-party acknowledgments.