Automatically Generate Slugs in Filament Forms Using suffixAction

When working with content-heavy applications like blogs or CMS, slugs are often used in URLs to make them SEO-friendly. In FilamentPHP, you can streamline this process by letting users generate a slug from the title with a single click — thanks to the suffixAction.

In this guide, we'll walk through how to add a "Generate Slug" button next to a slug input field that automatically converts the title to a slug.

Step-by-Step: Add suffixAction to Your Slug Field

Here’s the complete example you can copy into your Filament form:

use Filament\Forms;
use Filament\Forms\Components\TextInput;
use Illuminate\Support\Str;
use Filament\Forms\Form;
use App\Models\Post;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('title')
                ->required()
                ->maxLength(255),

            TextInput::make('slug')
                ->required()
                ->suffixAction(
                    Forms\Components\Actions\Action::make('GenerateSlug')
                        ->label('Generate Slug')
                        ->icon('heroicon-m-arrow-path') // Optional icon
                        ->action(function (Forms\Get $get, Forms\Set $set) {
                            // Generate slug from the 'title' field and set it to 'slug'
                            $set('slug', Str::slug($get('title')));
                        })
                )
                ->unique(Post::class, 'slug', ignoreRecord: true)
                ->maxLength(255),
        ]);
}

Breakdown

• TextInput::make('title'): This is the title input where users type the name or heading of the post.
• TextInput::make('slug'): The slug input where the URL-friendly string appears.
• suffixAction(): Adds a clickable button at the end of the input field.
• Action::make('GenerateSlug'): A Filament action that runs inline when clicked.
• Str::slug($get('title')): Laravel helper to transform the title into a slug format.
• $set('slug', ...): Dynamically sets the slug input's value in the form state.
• unique(..., ignoreRecord: true): Ensures slugs are unique while editing.

Benefits

• User-Friendly: No need for users to manually type the slug.
• Consistent: Ensures all slugs follow a predictable format.
• Dynamic: Adapts in real-time without a page reload.

Optional: Auto-generate on blur

Want to generate the slug as soon as the user finishes typing the title (without clicking)? You can also do that using event listeners, but for better user control, suffixAction keeps the process explicit.