I am working on an application and found that I needed to update another text input based on the title. With JS, it is simple. But with filament, it is simple too. Lets start. The scenario is that we needed to fill in the text field slug when users filled out the title field. Now let's code.
TextInput::make('title')
->label('Post Title')
->helperText('This is what your form will be named.')
->lazy()
->afterStateUpdated(function ($set, $state) {
$slug = Str::slug($state);
$set('slug', $slug);
}),
TextInput::make('slug')
->label('Post Slug')
->unique(ignorable: fn ($record) => $record),
So how do things work here?
When the user is writing the post title, it is waiting to leave the input box with lazy() keywords, and then after the status is updated for the title text input form, it is taking state and creating a slug using the Str::slug() Laravel helper. Then it sets the slug field.
After posting this in filament discord, I found this already exists, but not in the tips and tricks sections.
https://filamentphp.com/docs/3.x/forms/advanced#generating-a-slug-from-a-title