> ## Documentation Index
> Fetch the complete documentation index at: https://flex-fields.bjanczak.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Examples target Filament 5. Verify optional dependencies before configuring integrations.
> Upload transfer completion, permanent storage and record acceptance are separate milestones. Native and Spatie image conversions retain the original.

# Build a form field

> Use the Filament field lifecycle with your own view and a FLEX consumer boundary.

Build the PHP class using Filament's field lifecycle. Keep validation and saved values in PHP, and use your view for the interaction. Emit the consumer boundary in that view:

> [!TIP]
>
> **Watch this in the workshop:** [00:00 — start with Filament's generator](https://www.youtube.com/watch?v=m4V_R7YxTP4\&t=0s) · [04:34 — render the real child fields in Blade](https://www.youtube.com/watch?v=m4V_R7YxTP4\&t=274s).

```blade theme={"theme":{"light":"github-light","dark":"github-dark"}}
<x-filament-flex-fields::assets
    component="acme-rating-field"
    :consumer="$getLivewireKey()"
/>
```

Each instance needs its own stable consumer key, including fields repeated inside nested forms. Render existing FLEX controls through their public components or a child schema rather than copying their input or dropdown markup. Your JavaScript factory must clean up listeners, timers and subscriptions when its instance is destroyed.

## Start with the generated composite field

The generated `SummaryField` already wraps a real `FlexTextInput`. Replace or extend
its child schema rather than reproducing the input styling in a new template.

```php theme={"theme":{"light":"github-light","dark":"github-dark"}}
use Acme\Summary\Forms\SummaryField;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTextInput;

SummaryField::make('summary')
    ->schema([
        FlexTextInput::make('text')
            ->label('Summary')
            ->required()
            ->maxLength(80),
    ]);
```

The resulting field value is an object with a `text` key. Store it in a JSON column
with an `array` cast; a plain scalar database column does not match this starter's
value shape. Validate additional child keys on the server when extending the shape.

## Continue reading

[Columns and entries](https://flex-fields.bjanczak.com/docs/extensions/columns-and-entries.md) · [Validate submitted values](https://flex-fields.bjanczak.com/docs/extensions/validation.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.