README

Filament Flex Fields

The ultimate form components, custom fields builder, and UI kit for Laravel Filament v5.
61+ premium inputs, dynamic JSON storage, and pre-built performance-first esbuild pipeline.

Choice cards · Matrix choice grid · Tags · Slug & permalink preview · International Phone · Currency formatting · Maps & location · Translatable forms · Layout cards · Settings stack

A Filament v5 plugin for dynamic custom fields and a polished, modern SaaS-inspired form UI. Store all flex field values in a single JSON column — no per-field migrations, no EAV tables — or drop any component directly into Filament forms, tables, and schemas.

Stop stitching together a dozen separate Filament field plugins. Flex Fields ships 61 custom UI components with modern SaaS-inspired styling, layout primitives (ItemCard, SegmentTabs, CoverCard), table columns (UserColumn, RatingColumn), optional JSON custom-field storage, and a dev Playground — with pre-built CSS/JS in resources/dist/ so consumers do not need Node.js at install time. Assets are lazy-loaded per component with shared JS chunks so heavy pages stay fast.

Screenshots

SignatureField — Canvas Handwriting Signature Pad

MatrixChoiceField — Survey & Configurator Grid

FlexTextareaField — Autosize Textarea with Voice & Emoji Input

ProgressBar & ProgressCircle — Visual Progress Indicators

CurrencyField — Multi-Currency Localized Input

MapPickerField — Interactive Map Pin Selector

ItemCardGroup — Premium Card-Based Layout Group

DualListboxField — Reorderable Two-Panel Transfer List

PriceRangeField — Dual-Handle Price Filter

CreditCardField — Interactive Card Preview

FlexColorPickerField — Advanced Color Picker

AudioField & VoiceNoteRecorderField — Waveform Audio & Voice Messages

NumberStepper — Animated Numeric Control

ChoiceCards — Rich Selection Grid

VideoField — Video Player & Embed Component

TrackSlider — Inline Range & Segment Slider

SegmentControl — Segmented Button Tab Switcher

CoverCard — Media Rich Hero Banner

ProgressCircle — Semicircle & Circular Dashboard Metrics

RatingField — Visual Star Rating Input

HoldConfirmAction — Press & Hold Button

SlugField & TranslatableFields — Translatable SEO Slugs

PhoneField — International Phone Input

ColorSwatchField — Preset Color Swatches

And More — 61+ Premium Components & Visual Playground

Table of contents

• Why Flex Fields?
• Custom Components (61)
• Use cases
• Requirements
• Installation
• Setup
• Quick usage
• Playground
• Documentation
• FAQ
• Development

Why Flex Fields?

Filament Flex Fields is the most complete, visually stunning, and performance-optimized form component kit ever built for Filament v5. It is designed to replace dozens of scattered, uncoordinated community packages with a single, unified design system.

📦 61 Premium Filament Components (All-in-One UI Plugin)

No other package offers this level of coverage. Flex Fields delivers a massive library of 61 premium components (50 form fields, 9 layout/schema components, and 2 table columns). Instead of stitching together 15+ different plugins—each with their own design philosophies, code quality, and styles—you get a single, curated suite where everything works together flawlessly.

🎨 Modern SaaS Form UI & modern SaaS-inspired Design

Standard admin panels look plain. Flex Fields brings gorgeous, state-of-the-art UI elements inspired by SaaS. Every component features smooth CSS transitions, interactive hover micro-animations, clean borders, and a unified design token scale (--fff-*). Customize component sizes (sm, md, lg), colors, and focus states globally or per-field.

⚡ Enterprise-Grade Asset Performance (Lazy CSS & JS Code Splitting)

Loading dozens of complex fields shouldn't make your admin panel sluggish. Flex Fields implements an advanced, enterprise-grade asset loading system:

• Lazy-Loaded CSS: Component stylesheets are injected on-the-fly only when the field is rendered on the page.
• Tiered JS Chunks (esbuild code splitting): Shared libraries (like Mapbox, libphonenumber, emoji pickers, and audio players) are split into semantic modules. They are automatically preloaded and deduplicated via FlexFieldAlpineQueue—meaning the browser downloads each shared helper exactly once per page request, no matter how many fields use it.

🔍 View Asset Optimization details (CSS & JS tables)

CSS — lazy per component

Bundle	When it loads
core.css	Always — design tokens, shared layout, table columns
{component}.css	Only when that field is on the page (injected via load-stylesheet)
playground.css	Playground page only

Use PhoneField and TagsField on the same form → the browser fetches only phone-field.css and tags-field.css, not styles for the other 59 components.

JavaScript — tiered chunks (esbuild code splitting)

All Alpine components are built together with splitting: true:

Layer	What you get
Entry	Thin {component}.js — just the x-data factory for that field
Shared chunks	Reusable core/ modules with semantic names (flex-fields-emoji-*, flex-fields-audio-*, flex-fields-select-menu-*, …)
Manifest	alpine-manifest.json maps each field → its chunks for modulepreload
Dedup	FlexFieldAlpineQueue preloads each shared chunk once per request

Examples of what gets shared automatically:

Shared module	Used by	Why it matters
Emoji picker	FlexTextInput, FlexTextarea	~45 KB library loaded once, not twice
Audio core	AudioField, VoiceNoteRecorderField	Waveform, playback, time formatting in one chunk
Select menu shell	CountryField, TimezoneField, CurrencyField	One composable for floating searchable menus
Mapbox helpers	MapPickerField, AddressAutocompleteField	Geocoding logic shared
libphonenumber-js	PhoneField	~190 KB lazy import() — only when the field mounts

Fields with no shared deps (e.g. RatingField) stay as a single small entry — no artificial splitting.

Consumer-friendly

• Zero Node.js for consumers: Pre-built assets in resources/dist/ — no Node.js required in your host app.
• Auto-registered: After composer update, run php artisan filament:assets.
• Technical deep-dive: docs/index.md (Assets & playground).

🧩 Zero-Migration Custom Fields (Dynamic JSON Storage)

Define your fields dynamically in PHP and store all custom attributes in a single JSON column using our HasFlexFields trait. Build dynamic CMS pages, customer onboarding surveys, or customizable tenant settings on the fly without database migrations, new tables, or complex EAV joins.

🧬 Highly Reactive Form Builder & Specialized Inputs

Build complex forms that would otherwise take weeks of custom frontend development:

• MatrixChoiceField: A survey-style grid with radio/checkbox modes and reactive disableCellWhen() / disableRowWhen() logic to easily disable specific choices.
• TitleSlugField & SlugField: Beautiful inputs with live URL permalink previews, automatic slug generation, copy actions, and database uniqueness validation.
• Specialized inputs: Custom audio players with waveforms (AudioField), voice recorders (VoiceNoteRecorderField), weighted A/B splitters (TrafficSplit), multi-currency inputs (CurrencyField), card selection lists (ChoiceCards), and map pins (MapPickerField).

🧪 Standalone Filament Inputs or Dynamic Schema Registry

• Standalone Fields: Import any of the 61 components directly into your standard Filament forms, chaining them like native fields (no JSON column required).
• Dynamic Builder: Bind your registry schemas to forms automatically using FlexFieldFormBuilder for dynamic JSON attributes.

🔍 Built-in Local Developer Playground (Visual QA)

Validate, preview, and interact with all 61 custom components instantly. Flex Fields features an out-of-the-box local Playground page (/admin/playground by default) containing interactive previews of every field to speed up your development.

Custom Components (61)

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: docs/index.md.

Text & input (9)

Component	Description
FlexTextInput	Enhanced text input — speech dictation, emoji picker, password strength, clearable
FlexTextareaField	Animated autosizing textarea with character counter
PhoneField	International phone input with libphonenumber validation
CountryField	Searchable country picker with flags
TimezoneField	IANA timezone picker with UTC offset display
SlugField	Slug input with permalink preview, uniqueness, regenerate/copy actions
TitleSlugField	Title + slug pair with live URL preview and optional Spatie Sluggable
AddressAutocompleteField	Mapbox-powered address search with structured storage
FlexVerificationCode	OTP / 2FA verification code input with grouping

Number & range (6)

Component	Description
NumberStepper	+/- numeric stepper control
CurrencyField	Multi-currency money input with locale-aware formatting
FlexSlider	Styled range slider with value display
TrackSlider	Track-style slider — single value, percentage, or min/max range
PriceRangeField	Dual-handle price filter with histogram
TrafficSplit	Weighted segment split control (A/B-style traffic allocation)

Choice & selection (13)

Component	Description
SwitchField	Animated toggle switch with row/inline layouts
CellSwitch	Compact SwitchField variant for table cells
SegmentControl	Segmented button control
ChoiceCards	Rich card-based radio selection
ChoiceCheckboxCards	Rich card-based multi-select
FlexChecklist	Animated checklist with icons and descriptions
FlexRadiolist	Animated radio list with icons and descriptions
MatrixChoiceField	Survey / configurator matrix grid — radio or checkbox per row
SelectField	Rich select with avatars, badges, and descriptions
UserSelect	User picker with avatar stacks and verification badges
DualListboxField	Two-panel reorderable transfer list
TagsField	Tag input — pills below the field with inline remove buttons
FlexSpatieTagsField	Spatie Tags integration for TagsField

Date & time (9)

Component	Description
FlexDateField	Segmented date input without calendar popover
FlexDatePicker	Date picker with calendar popover
FlexTimeField	Time picker (12h / 24h, seconds optional)
FlexDateTimePicker	Combined date + time picker
FlexDateRangeField	Start/end date range
FlexDurationField	Duration input (hours / minutes)
FlexTimeRangeField	Start/end time range
FlexMonthPicker	Month picker
FlexYearPicker	Year picker

Media, color & location (12)

Component	Description
ColorSwatchField	Preset color swatch picker
FlexColorPickerField	Advanced color picker with grid and eyedropper
FlexFileUpload	Styled file upload with security presets
FlexImageUpload	Image upload with processing options
FlexSpatieMediaLibraryFileUpload	Spatie Media Library upload integration
VideoField	Video URL / player with YouTube support
AudioField	Audio URL / player with waveform
VoiceNoteRecorderField	In-browser voice recorder — waveform, local playback, deferred or immediate upload
MapPickerField	Interactive map pin picker
SignatureField	Canvas signature pad
CreditCardField	Card preview with Luhn validation and CVV flip
CellSlider	Compact TrackSlider variant for table cells

Rating (1)

Component	Description
RatingField	Star rating input

Layout & display — schemas (9)

Component	Description
SegmentTabs	Tabbed segment navigation for forms
TranslatableFields	Locale tabs wrapping any fields (JSON or Spatie Translatable)
TranslatableTabs	Legacy alias for TranslatableFields
ItemCard	Single settings-style card row
ItemCardGroup	Polished card-based settings group
ItemCardStack	Stacked card layout for profile / settings pages
CoverCard	Hero cover card for tabbed editors
ProgressBar	Linear, pill, or segment progress bar
ProgressCircle	Circular or semicircle progress indicator

Ready-made layout recipes: Form layout patterns.

Table columns (2)

Component	Description
UserColumn	Avatar + name/email display with hover card
RatingColumn	Star rating display in Filament tables

Total: 61 custom components (50 form fields + 9 layout/schema + 2 table columns).

Use cases

Scenario	Recommended components
CMS / page builder	TitleSlugField, TranslatableFields, FlexFileUpload, FlexImageUpload
CRM custom fields	JSON flex fields + PhoneField, CountryField, UserSelect
Product configurator	MatrixChoiceField, ChoiceCards, PriceRangeField, ColorSwatchField
Surveys & assessments	MatrixChoiceField, FlexRadiolist, RatingField
SaaS onboarding	ChoiceCards, SegmentTabs, CoverCard, ProgressCircle
E-commerce filters	PriceRangeField, TrackSlider, DualListboxField
User profile settings	ItemCardGroup, PhoneField, TimezoneField, SignatureField
Payment forms	CreditCardField, FlexVerificationCode
Location services	MapPickerField, AddressAutocompleteField
A/B configuration	TrafficSplit, SegmentControl

Requirements

Dependency	Version
PHP	8.3+
Laravel	11+
Filament	5.x (filament/filament ^5.0)

Optional integrations (see composer.json → suggest):

Package	Used 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

Composer (Packagist)

composer require janczakb/filament-flex-fields

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

Important

Register Filament assets after every install or update:

php artisan filament:assets

Auto-discovered via composer.json → extra.laravel.providers.

Keep assets in sync — add to your host app composer.json:

"scripts": {
    "post-autoload-dump": [
        "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
        "@php artisan package:discover --ansi",
        "@php artisan filament:assets"
    ]
}

Setup

1. Register the plugin

use Bjanczak\FilamentFlexFields\FilamentFlexFieldsPlugin;

public function panel(Panel $panel): Panel
{
    return $panel->plugin(FilamentFlexFieldsPlugin::make());
}

2. Publish configuration (optional)

php artisan vendor:publish --tag=filament-flex-fields-config

3. 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

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: docs/index.md.

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

A dev UI page previews every custom component.

Setting	Env variable	Default
Plugin 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, item-card-group, progress-circle.

Documentation

Document	Contents
docs/index.md	Complete per-component API — every method, option, validation rule, config key, and example
config/filament-flex-fields.php	Default schemas, UI sizes, playground toggles

FAQ

Do I need Node.js to use this package? No. Pre-built CSS/JS are committed to resources/dist/. Node is only needed when developing the package itself.

How does asset loading work? Each component loads its own CSS/JS on demand. Shared JavaScript (emoji picker, audio UI, country/timezone menus, Mapbox, etc.) is split into cached chunks with semantic names — loaded once per page even when multiple fields use the same module. See 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? 61 custom UI classes with own views and CSS — listed in Custom Components (61). The optional JSON flex-field registry wires these components via FlexFieldFormBuilder.

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 docs/index.md → MatrixChoiceField.

Development

composer install
composer test          # Pest
composer analyse       # PHPStan

npm install
npm run build          # CSS + JS → resources/dist/
composer format        # Laravel Pint

Rebuild assets after changing resources/css/ or resources/js/.

See LICENSE for license details.

Made with ❤️ by Bartłomiej Janczak