Filament v4 provides many slots in form fields where you can insert additional content. These slots accept text, schema components and actions.

You can find a full list of available methods here.

In this example, we'll add a live character counter to an excerpt textarea field. The counter will update dynamically with JavaScript and change color based on the remaining characters.

The trick

We'll use the afterLabel() method to insert custom HTML right after the field label (aligned to the right). This HTML includes a counter powered by Alpine.js, which updates as the user types.

We can get the value from input using $state.

Textarea::make('excerpt')
    ->afterLabel(new HtmlString(<<<'HTML'
        <span
            x-data="{ get remaining() { return 255 - $state.length } }"
            x-text="remaining"
            :class="remaining >= 0 ? 'text-success-500' : 'text-danger-500'"
        >
        </span>
    HTML))
    ->rows(3)
    ->maxLength(255)
    ->columnSpanFull(),

Conclusion

Filament flexible slot system allows you to extend fields with custom content in a clean, maintainable way. Whether you need counters, helper text, buttons, or interactive elements, slots let you customize your forms without touching the framework's internals.

Download source code

Download on GitHub

Join the Discussion

Run project on Firebase Studio

• Open studio.firebase.google.com and import the repository https://github.com/wiremodel/simple-blog
• Run the project. Once it's up, switch to the correct branch:

git checkout v4/js-content

Update dependencies and migrate the database:

composer update -W
php artisan migrate:fresh --seed