Count how many characters left in field in filamentphp v3

So basically let's get to work. Also in this code example there's a reactive component for slug.

Let's say you have this form component:

Forms\Components\TextInput::make('title')
    ->required()
    ->maxLength(60),
Forms\Components\TextInput::make('slug')
    ->required()
    ->maxLength(255),

And now you want to show the user how many characters are left to type. You can simply add the following code to the form component:

Forms\Components\TextInput::make('title')
    ->required()
    ->maxLength(60)
    ->reactive()
    ->live(debounce: 700)
    ->afterStateUpdated(fn($state, callable $set) => $set('slug', Str::slug($state)))
    ->hint(fn($state, $component) => 'left: ' . $component->getMaxLength() - strlen($state) . ' characters'),
Forms\Components\TextInput::make('slug')
    ->required()
    ->maxLength(255),

Now let's explain what happens in here:

Code Explanation

1. Forms\Components\TextInput::make('title'):
   • This creates a new TextInput form component for an input field named title.
2. ->required():
   • Specifies that this field is required, meaning the form cannot be submitted without a value in this field.
3. ->maxLength(60):
   • Sets the maximum length of the title input to 60 characters. Users cannot type more than 60 characters in this field.
4. ->reactive():
   • Makes the component reactive, so any changes to the field’s value trigger any state changes or dynamic updates in real-time without requiring the form to be submitted.
5. ->live(debounce: 700):
   • Enables Livewire's live mode with a debounce delay of 700 milliseconds. This means that when the user types into the field, Filament waits for 700 milliseconds after the last keystroke before updating the Livewire state. This reduces the frequency of updates, which can improve performance and reduce server requests.
6. ->afterStateUpdated(fn($state, callable $set) => $set('slug', Str::slug($state))):
   • This callback runs every time the title field’s state is updated.
   • $state contains the current value of title.
   • $set is a callable function that lets you update other field values or component states.
   • Str::slug($state) is a helper function that converts the title into a URL-friendly "slug" format (e.g., "My Title" becomes "my-title").
   • $set('slug', Str::slug($state)) updates the value of a separate slug field in the form with this slugified version of title.
7. ->hint(fn($state, $component) => 'left: ' . $component->getMaxLength() - strlen($state) . ' characters'):
   • This sets a hint below the input field that shows the user how many characters they have left to type.
   • $state is the current value of title.
   • $component->getMaxLength() fetches the maximum length set for the component (60).
   • strlen($state) gives the length of the current input value.
   • The result is a hint message like "left: 45 characters" that updates dynamically based on the current character count.