Skip to main content
Filament Flex Fields is a Filament v5 plugin for Laravel admin panels: 68 custom components, a unified --fff-* design system, and an optional JSON custom-field layer without EAV tables or per-attribute migrations. 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.

​
Quick start

composer require janczakb/filament-flex-fields
php artisan filament:assets
Register the plugin on your panel: 
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

ApproachBest forWhat you need
Standalone componentsFixed forms — profiles, checkout, CMS pagesImport the field class and chain Filament’s fluent API
JSON flex fieldsCRM custom attributes, tenant settings, variable page typesHasFlexFields 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

DependencyMinimum
PHP8.3+
Laravel11+
Filament5.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

CategoryCountHighlights
Form fields56PhoneField, CurrencyField, MatrixChoiceField, FlexFileUpload, MapPickerField, IconPickerField
Layout & schema9ItemCardGroup, SegmentTabs, CoverCard, TranslatableFields
Table columns3UserColumn, RatingColumn, IconColumn
Total68
Every component loads only its own CSS and JS when rendered — including inside Filament modals and slide-overs.

​
Explore the docs

​
Getting started

PageWhat you’ll learn
Shared conceptsDesign system, sm / md / lg sizing, lazy assets, playground
Form layout patternsCombine layout primitives into rich admin UIs
Layout components — quick comparisonPick the right card or tab layout
Deprecated class aliasesLegacy class names and migration paths

​
Text & input

FlexTextInput · FlexTextareaField · FlexRichEditor · PhoneField · CountryField · TimezoneField · SlugField & TitleSlugField · AddressAutocompleteField · FlexVerificationCode · TagsField · LinkPreviewField · SocialLinksField

​
Number & range

NumberStepper · CurrencyField · FlexSlider · TrackSlider · PriceRangeField · TrafficSplit

​
Choice & selection

SwitchField · SegmentControl · ChoiceCards · ChoiceCheckboxCards · FlexChecklist · FlexRadiolist · MatrixChoiceField · SelectField · IconPickerField · UserSelect · DualListboxField

​
Date & time

Date & time fields · ScheduleField

​
Media, color & location

ColorSwatchField · FlexColorPickerField · FlexFileUpload & FlexImageUpload · VideoField · AudioField · VoiceNoteRecorderField · MapPickerField · SignatureField · CreditCardField · BarcodeScannerField

​
Rating & tables

RatingField · RatingColumn · IconColumn · UserColumn

​
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 built-in dev Playground in your Filament panel to preview every component interactively: 
FLEX_FIELDS_PLAYGROUND=true
Open Settings & Tools → Flex Fields Playground in the admin panel. Useful for comparing variants, testing lazy CSS loading, and validating modal / slide-over behaviour before shipping forms to production.