Show Remaining Characters in a Filament Text Input
When building forms in Laravel Filament, you might sometimes want to enforce a maximum character limit on a `TextInput` or `Textarea` and show the users how many characters they have left as they type.
The Solution
Filament makes this incredibly easy out of the box. You simply chain the maxLength() and live() or use the built-in character hint features depending on your Filament version.
use Filament\Forms\Components\TextInput;
TextInput::make('title')
->maxLength(255)
->live(onBlur: true)
->hint(fn ($state, $component) => $state ? $component->getMaxLength() - strlen($state) . ' characters left' : '255 characters left')
By using the dynamic ->hint(), you can evaluate the current state length against the maximum length and return a useful string directly above or below the input.
However, newer versions of Filament often have built-in support for character counts if you dig into the form builder docs. A simpler modern approach is:
TextInput::make('description')
->maxLength(100)
->live()
->afterStateUpdated(function (TextInput $component, $state) {
// Additional state actions
})
Wrap Up
And that's it! Filament's fluent API and easy access to Component configuration make dynamic hints incredibly simple to implement.