Posted by Kosal
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.
suffixAction
to Your Slug FieldHere’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),
]);
}
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.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.