Build your own FLEX components

Build the control your application needs from the controls FLEX already provides. Combine a Select, Text Input, color picker or other field in your own layout. Keep its configuration, validation and interactions, without copying its HTML or JavaScript. Start with a composition in one form. When you need a reusable package, add a named field, matching display views and the configuration your application uses.

Watch: build a custom component step by step

Follow a narrated workshop from Filament’s field generator to a reusable Composer package. Build a campaign brief with live channel previews and tracking links, then add typed configuration, your own CSS and JavaScript, table and infolist views, translations and AI-readable guidance.

Watch on YouTube 1 hour 4 minutes · English narration · Full HD · 27 YouTube chapters. The workshop starts in an existing Laravel application with Filament 5 and FLEX Fields v4 installed.

Jump to a workshop chapter

Compose existing fields

Build a call-to-action control with text, a URL and a Select.

Create a reusable package

Generate a field, table column and infolist entry in one package.

Use saved schemas

Select and configure registered component families from stored definitions.

Add AI guidance

Let assistants discover your component’s usage, examples and storage contract.

1. Compose a control from real fields

Watch the example: 02:04 — compose real child fields · 04:34 — place them in Blade. A composed control has a parent layout and real child fields. Each child keeps its own behavior; the parent decides how they are arranged and named. Add this to the schema of an existing Resource or form:

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\CompositeField;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTextInput;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\SelectField;

CompositeField::make('call_to_action')
    ->label('Call to action')
    ->schema([
        FlexTextInput::make('label')
            ->label('Button text')
            ->required()
            ->maxLength(80)
            ->emojiPicker(),
        FlexTextInput::make('url')
            ->label('Destination URL')
            ->url()
            ->required(),
        SelectField::make('target')
            ->label('Open link in')
            ->options(['_self' => 'Same tab', '_blank' => 'New tab'])
            ->default('_self')
            ->required(),
    ]);

This composition produces one nested value with label, url and target. For ordinary Eloquent storage, provide a matching JSON column and array cast; FLEX does not create the database column. If your application needs separate columns or related rows, define that mapping in its save flow. Every child still accepts its supported PHP options. Enabling emoji on the text field does not enable it on other text fields, and choosing a parent layout does not replace the child’s validation or asset ownership. See the complete composition patterns.

2. Give one value several presentations

Watch the example: 36:12 — share a validated value across a field, table column and infolist entry. A component family can expose a field for editing, a column for tables and an entry for infolists. You can provide just the surfaces your application needs. For example, a Summary field can edit text while its column and entry display that same text. Shared appearance can be reused without loading the editor’s interactive JavaScript in the read-only views. The quickstart generates a working Summary package. Follow columns and entries when adding another presentation to your own family.

3. Render components selected by a saved schema

Watch the example: 59:42 — validate configured family values · 1:01:26 — prepare an explicit value migration. Use a saved schema when the set of fields is configurable, such as product attributes or tenant settings. Your application registers which families are available and defines their supported configuration. A saved definition chooses from trusted, installed families. It does not contain executable PHP callbacks or invent a new renderer. Keep relationship queries, authorization and custom save logic in your application. This is optional. A normal field or a simple composition does not require a managed JSON field group. Learn about schema adapters, builders and saving values.

How composition shares resources

What you need	What you declare
Reuse another component’s appearance	`stylesFrom` — share its styles without importing its interactive JavaScript
Require another component’s styles and JavaScript	`uses` — declare a full dependency; render its actual control separately
Render independently configured children	`children` and child schemas — keep each rendered child’s state and lifecycle
Enable an optional editor or other tool for one instance	`capabilities` — request that feature only for the instances that enable it

A dependency declaration does not draw the child. Render its real PHP component or use a child slot. Each rendered instance retains its own resource boundary, including when the composition appears in a repeater, tab or modal. See resource ownership, typed Select children and the child’s full PHP API.

Choose your next step

You want to…	Continue with
Reuse a small group of fields in your application	Composition patterns
Build and install a named package	Your first extension
Configure children with callbacks or relationships	Child PHP API
Define supported options and defaults	Configuration
Add an editor, dialog or browser interaction	Runtime SDK and custom surfaces
Use your own CSS, translations or RTL layout	Appearance and locales
Upgrade saved values and settings	Migrations

Using an extension privately or publishing it

You own your independently written application code. Creating an extension does not change FLEX’s license or grant rights to redistribute FLEX. Private use must fit your existing free or commercial grant. Before distributing a package or reusable kit, check the licensing conditions and agree any required Custom rights. A license for your hosted application does not automatically cover software delivery to other customers.

Getting started

Components and families

Composition

Configuration and values

JavaScript and interactions

Assets and delivery

Appearance and discovery

Publishing and support

Build your own FLEX components

Watch: build a custom component step by step

Compose existing fields

Create a reusable package

Use saved schemas

Add AI guidance

1. Compose a control from real fields

2. Give one value several presentations

3. Render components selected by a saved schema

How composition shares resources

Choose your next step

Using an extension privately or publishing it

​Watch: build a custom component step by step

Compose existing fields

Create a reusable package

Use saved schemas

Add AI guidance

​1. Compose a control from real fields

​2. Give one value several presentations

​3. Render components selected by a saved schema

​How composition shares resources

​Choose your next step

​Using an extension privately or publishing it

Watch: build a custom component step by step

1. Compose a control from real fields

2. Give one value several presentations

3. Render components selected by a saved schema

How composition shares resources

Choose your next step

Using an extension privately or publishing it