Filament Flex Fields

Filament Flex Fields is the all-in-one Filament form fields / form components plugin for Filament v5 Laravel admin panels: 79 custom components, a unified --fff-* design system, first-class Spatie Media Library and disk/S3 uploads (Media Ingress), and an optional JSON custom-field layer without EAV tables. Use any field as a standalone drop-in, or wire dynamic schemas through HasFlexFields and FlexFieldFormBuilder. Pre-built CSS and JavaScript ship in the package — no Node.js in production. Built so you do not install a separate plugin for each field type. Standouts: SelectField — virtualized lists, async Livewire search, rich option rows, mobile bottom sheets · FlexSpatieMediaLibraryFileUpload / disk uploads · phone, currency, maps, signatures, rich editor, NPS/matrix surveys — one coherent kit.

Premium companion — Filament Flex Forms
Drag-and-drop Studio, public fill & embed, submissions, Insights, and integrations — a commercial Filament plugin built on Flex Fields.
Buy · Docs · GitHub

Quick start

composer require janczakb/filament-flex-fields
php artisan filament:assets

use Bjanczak\FilamentFlexFields\FilamentFlexFieldsPlugin;

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

Drop a component into any form schema:

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\PhoneField;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\MatrixChoiceField;

PhoneField::make('phone')->defaultCountry('PL')->required();

MatrixChoiceField::make('priorities')
    ->rows(['speed' => 'Speed', 'cost' => 'Cost'])
    ->columns(['low' => 'Low', 'high' => 'High']);

Upgrading? Run composer update janczakb/filament-flex-fields and php artisan filament:assets. Automate the second step with filament:assets in post-autoload-dump for a hands-off workflow.

Two ways to use Flex Fields

Approach	Best for	What you need
Standalone components	Fixed forms — profiles, checkout, CMS pages	Import the field class and chain Filament’s fluent API
JSON flex fields	CRM custom attributes, tenant settings, variable page types	`HasFlexFields` trait + schemas in config or `FlexFieldSchemaRegistry`

Both approaches share the same component library, design tokens, and lazy asset loading. Start with Shared concepts for sizing, assets, and conventions.

Requirements

Dependency	Minimum
PHP	8.3+
Laravel	11+
Filament	5.x (`^5.0`)

Optional Spatie packages (sluggable, translatable, media library, tags) integrate where documented — none are required for core usage.

What’s in the box

Category	Count	Highlights
Form fields	64	`SelectField` (virtualized + async), `PhoneField`, `CurrencyField`, `MatrixChoiceField`, Media Ingress uploads, `MapPickerField`, `IconPickerField`
Layout & schema	8	`ItemCardGroup`, `SegmentTabs`, `CoverCard`, `TranslatableFields`
Table columns	7	`UserColumn`, `RatingColumn`, `IconColumn`, `ProgressColumn`, `StatusChipColumn`, `MapPinColumn`, `SignaturePreviewColumn`
Total	79

Every component loads only its own CSS and JS when rendered — including inside Filament modals and slide-overs. HoldConfirmAction is documented under Actions and is not counted in the 79.

Explore the docs

Getting started

Page	What you’ll learn
Shared concepts	Design system, `sm` / `md` / `lg` sizing, lazy assets, playground
Flex Field Groups	Optional migrations (`flex_field_groups`, `flex_field_schema_versions`), DB admin CRUD, `SchemaRegistry` versioning — opt-in M8
Form layout patterns	Combine layout primitives into rich admin UIs
Layout components — quick comparison	Pick the right card or tab layout
Deprecated class aliases	Legacy class names and migration paths
Media Ingress	Disk vs Spatie, S3, conversions, AV/quarantine, FormBuilder, voice/signature/rich editor
Media Ingress migration	Upgrade checklist from MediaCaptureOs / old Spatie adapter paths

Rating & tables

RatingField · NpsField · UserColumn · RatingColumn · IconColumn · Admin columns (Progress · StatusChip · MapPin · SignaturePreview)

Layout & display

ItemCard · ItemCardGroup · ItemCardStack · CoverCard · ProgressBar · ProgressCircle · SegmentTabs · TranslatableFields

Actions

Hold confirm action — press-and-hold Filament actions for destructive or irreversible operations

Playground

Enable the playground in your Filament panel to preview components interactively:

FLEX_FIELDS_PLAYGROUND=true

Open Settings & Tools → Flex Fields Playground in the admin panel. Use it to compare variants and test form behaviour before shipping to production.

Getting Started

Guides & Resources

Text & Input

Number & Range

Choice & Selection

Date & Time

Media, Color & Location

Rating & Tables

Actions & Enterprise

Layout & Display (Schemas)

Quick start

Two ways to use Flex Fields

Requirements

What’s in the box

Explore the docs

Getting started

Text & input

Number & range

Choice & selection

Date & time

Media, color & location

Rating & tables

Layout & display

Actions

Playground

Links

​Quick start

​Two ways to use Flex Fields

​Requirements

​What’s in the box

​Explore the docs

​Getting started

​Text & input

​Number & range

​Choice & selection

​Date & time

​Media, color & location

​Rating & tables

​Layout & display

​Actions

​Playground

​Links

Quick start

Two ways to use Flex Fields

Requirements

What’s in the box

Explore the docs

Getting started

Text & input

Number & range

Choice & selection

Date & time

Media, color & location

Rating & tables

Layout & display

Actions

Playground

Links