README

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?

What makes FLEX worth choosing	What it gives your application
One toolkit. A consistent interface.	A shared visual system across 79+ components, configurable field variants and sizes, and dedicated mobile layouts where the interaction needs them.
Load less. Reuse more.	Use a broad catalog without loading every component on each page. Shared resources are reused, and optional tools stay configurable for each field.
Media from capture to presentation.	Uploads, URL imports, camera capture and supported generated media connect to storage, image versions, optional workers, previews and editable file information through Media OS.
Keep your Spatie setup.	Optional integrations for Media Library, Tags, Translatable and Sluggable connect FLEX interfaces to the models your application already uses.
Compose. Don't copy.	Build your own controls from configurable FLEX children, reusing their renderers and assets. Extend a component family with table and infolist presentations when needed.
Fields that calculate. Results checked in PHP.	Define linked formulas for totals, taxes and other numeric results. Update them live and recalculate from validated inputs before saving.

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

Animated preview of locale tabs and multilingual form fields

Content in your users' languages
Switch locales and edit translated fields in one editing flow.

Explore multilingual fields →

Animated preview of weekly business hours with day switches and time slots

Business hours, ready to configure
Weekly time slots and breaks, with matching table and infolist displays.

Explore weekly schedules →

Animated preview of a handwritten signature drawn inside a Filament form

Capture a signature inside the form
Touch, stylus and mouse input, with ink controls, undo, redo and export options.

Explore signature capture →

Animated preview of an interactive NPS survey rating

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.

Step	Your configuration
Add & validate	Choose sources, accepted formats, file limits and image constraints. URL-imported files enter the shared validation workflow.
Store & process	Use Laravel disks, including a configured S3 disk, or Spatie Media Library. Define named image versions and choose synchronous or queued processing.
Preview & inspect	Select a saved preview conversion, use avatar/grid/list layouts and enable the fullscreen viewer or image editor where needed.
Describe & save	Expose only the information you need: alternative text, title, caption, tags or custom FLEX fields. Choose translated fields, locales, a primary language and validation rules.

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.

On your page	What FLEX does
Several instances of the same control	Shares CSS, JavaScript and pending loads. Each instance keeps its own values and configuration.
A composite control containing other controls	Resolves declared child dependencies and reuses their renderers and resources.
A field inside an inactive tab, wizard step or closed dialog	Waits for that area to activate before initializing its controls.
A field removed by Livewire	Disposes registered instance-owned effects while preserving dependencies still needed by other instances.
A nested dialog closes	Releases its resource interests and pending surface work; still-mounted factories are destroyed only when unmounted.

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 →

Technical details: asset planning, loading and cleanup

FLEX coordinates a dependency graph, shared loading and the lifecycle of each rendered instance. Plans are cached; resource ownership, priority queues and readiness checks respond to interactions and Livewire updates.

Read from START at the top. The included assets must already be published through your deployment process; this diagram follows registration, page rendering and the main browser lifecycle.

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;

Solid arrows show the main preparation path. Dashed arrows show activation, updates, recovery and cleanup. The three layers cooperate throughout the page's lifetime; READY is an interactive state, not the end of the system's work.

This is a lifecycle overview. Release publication, transport policies and detailed failure paths have their own deployment and asset-loading guidance.

Full component composition and CSS-only reuse are distinct: sharing another control's styles does not automatically start its JavaScript. Closing one instance preserves resources used by the page or other instances; evaluated JavaScript remains in the browser.

Four optional Spatie integrations

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

Spatie package	What FLEX adds
Media Library	Upload and voice-capture interfaces connected to media collections, staging, file information, preview conversions and processing status.
Tags	Tag selection with types, locales and search fallback. Translated names can belong to the same tag rather than a separate tag for every language.
Translatable	Locale tabs and state mapping for multilingual model attributes, with selectable languages.
Sluggable	A live permalink preview based on the model's slug configuration, including a chosen title language as the slug source.

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

You are building…	Start with…
Large searchable catalogs and contextual selections	SelectField — virtualized lists, configurable result pagination, rich option views and a mobile selection sheet.
Product galleries and multilingual image information	FLEX Upload — Media OS, preview conversions, file information and viewer tools.
Inventory and asset intake	BarcodeScannerField — camera-based QR and barcode scanning with configurable formats.
Opening hours and weekly availability inputs	ScheduleField — weekly slots and breaks, with table and infolist presentation.
Agreements and voice notes	SignatureField and VoiceNoteRecorderField — capture directly inside the form.
Content editing and recognizable link cards	FlexRichEditor and LinkPreviewField — rich content, image attachments and Open Graph previews.
Brand typography and font settings	FontSelect — searchable Google Fonts with virtualized, paginated results and real previews loaded only for visible options and configured selections.
Live totals, taxes and dependent numeric fields	Calculated fields — reusable formulas, validated inputs and results recalculated in PHP before saving.
Configurable CRM or product attributes	Flex Field Groups — managed custom fields stored as JSON.
Your own reusable component family	Extensions — compose existing FLEX controls and deliver a field, table column and infolist entry with shared resources.

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

Category	Components
Text & content	FlexTextInput, FlexTextareaField, FlexRichEditor PhoneField, CountryField, TimezoneField SlugField & TitleSlugField, AddressAutocompleteField FlexVerificationCode, LinkPreviewField, SocialLinksField
Numbers & ranges	NumberStepper, CalculatorField, CurrencyField FlexSlider, TrackSlider, PriceRangeField, TrafficSplit
Selects & lists	SelectField, UserSelect, TagsField & FlexSpatieTagsField FontSelect, IconPickerField, DualListboxField FlexChecklist, FlexRadiolist, TodoListField
Choices & switches	SwitchField, SegmentControl, ChoiceCards, ChoiceCheckboxCards ImageChoiceCards, BubbleChoiceField MatrixChoiceField, FlexMatrixTable
Dates & times	FlexDateField, FlexDatePicker & FlexDateTimePicker, FlexDateRangeField FlexTimeField, FlexTimeSegmentsField & FlexTimeRangeField FlexMonthPicker, FlexYearPicker & FlexDurationField, ScheduleField
Uploads & capture	FlexFileUpload, FlexImageUpload & FlexSpatieMediaLibraryFileUpload VoiceNoteRecorderField & VoiceNoteSpatieRecorderField SignatureField, BarcodeScannerField
Audio, video & card previews	AudioField, VideoField, CreditCardField
Maps & geography	MapPickerField, MapCoordinatesField, MapDisplayField, MapMarkersField, MapZonesField, MapEditorField, CountryMapField
Color	ColorSwatchField, FlexColorPickerField
Ratings & surveys	RatingField, NpsField

Layouts, tables, infolists and actions

Category	Components
Tabs & translations	SegmentTabs with `SegmentTab`; TranslatableFields with `TranslatableTab`
Cards & presentation	ItemCard, ItemCardGroup, ItemCardStack, CoverCard ProgressBar, ProgressCircle
Table columns	UserColumn, RatingColumn, IconColumn MapPinColumn, ProgressColumn, SignaturePreviewColumn, StatusChipColumn ScheduleColumn, FlexMediaImageColumn, FlexSpatieMediaLibraryImageColumn
Infolist entries	ScheduleEntry, FlexMediaImageEntry, FlexSpatieMediaLibraryImageEntry
Actions	Action, including `holdConfirm()`; `ActionGroup`

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

Questions before you install

Can I use just one component?

Yes. Add individual FLEX components to an existing Filament form. Ordinary fields can use existing model attributes; managed JSON field groups are optional.

Will every component load on every page?

No. Installing FLEX includes its distributed files and required Composer dependencies. The browser loads component assets as they are needed, together with the panel's shared base resources.

Do I need Node.js or a custom Tailwind build?

Not for normal use. FLEX ships prebuilt browser assets; publish them with php artisan filament:assets. Authors building their own extension assets may need a build process.

Is Spatie Media Library required?

No. Use Laravel disks and native Media OS conversions, or enable the optional Spatie adapter. The same principle applies to optional Tags, Translatable and Sluggable integrations: install the packages you choose to use.

Can I configure thumbnails and background image processing?

Yes. Define your conversions and choose the one used for saved previews. Browser-generated thumbnails for new files are optional and disabled by default. Native conversions can be queued; Spatie conversions use the model's queue configuration. Pending conversions may fall back to the available original.

What happens when I update the package?

Update through Composer and publish matching browser assets through your Filament deployment hook or php artisan filament:assets. Preserve your application settings, review pending migrations and restart relevant workers. See Updating & deployment.

Can I create my own components?

Yes. Compose existing FLEX controls using their configuration APIs and reuse their renderers and assets. A component family can provide a form field, table column and infolist entry. Follow the extension tutorials for the supported registration and build contracts.

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.

Plan	Price	What it covers
Permitted Free Use	Free	Qualifying personal, educational, research and internal business use, private pre-production evaluation, and eligible bespoke client work under LICENSE §§1.7 and 5.6.
Single Product	$249 one-time	One named hosted commercial Product for one named licensee.
Unlimited Company	$699 one-time	Current and future hosted Products of one named company or sole proprietor.
Enterprise Group	$1,499 one-time	Hosted Products across a named parent and its qualifying 100%-owned subsidiaries.
Custom / OEM / Redistribution	From $2,999; quoted individually	Customer installations, distribution and other rights expressly agreed in the grant.

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.

janczakb / filament-flex-fields

Package info

Security

Fund package maintenance!

Statistics

README

FLEX Fields
Advanced form components for Filament 5

Configure one field, including with AI

Why choose FLEX Fields?

See what you can build

Filament file uploads, powered by Media OS

One product-photo workflow

Automatic media cleanup schedules

Live calculations, checked before saving

Intelligent asset loading

Four optional Spatie integrations

Installation

Advanced example: queued WebP image variants

Find the solution your application needs

Component catalog

Form fields and controls

Layouts, tables, infolists and actions

Questions before you install

Licensing

Build your next Filament form with FLEX

janczakb / filament-flex-fields

Package info

Security

Fund package maintenance!

Statistics

README

FLEX FieldsAdvanced form components for Filament 5

Configure one field, including with AI

Why choose FLEX Fields?

See what you can build

Filament file uploads, powered by Media OS

One product-photo workflow

Automatic media cleanup schedules

Live calculations, checked before saving

Intelligent asset loading

Four optional Spatie integrations

Installation

Advanced example: queued WebP image variants

Find the solution your application needs

Component catalog

Form fields and controls

Layouts, tables, infolists and actions

Questions before you install

Licensing

Build your next Filament form with FLEX

FLEX Fields
Advanced form components for Filament 5