Generate slugs from a title whilst typing (without overriding) by Ralph J. Smit - Tricks

Generate slugs from a title whilst typing (without overriding)

: Jun 8, 2022
: Ralph J. Smit
: Form builder
: 27 favorites Favorite this trick

Sometimes you want your users to input a title (e.g. for a blog post) and automatically generate a slug from that title. However, you want to stop overriding the slug when the user has made at least one manual change.

Luckily, this is quite easy to achieve with a hidden field, to store an addition value:

TextInput::make('title')
    ->afterStateUpdated(function (Closure $get, Closure $set, ?string $state) {
        if (! $get('is_slug_changed_manually') && filled($state)) {
            $set('slug', Str::slug($state));
        }
    })
    ->reactive()
    ->required(),
TextInput::make('slug')
    ->afterStateUpdated(function (Closure $set) {
        $set('is_slug_changed_manually', true);
    })
    ->required(),
Hidden::make('is_slug_changed_manually')
    ->default(false)
    ->dehydrated(false),

Other tricks

Reusing Forms when using Tables and Forms

Table builder Form builder

by Tony Partridge, 1 year ago

2 2825

Hide and show form field bases on a multi-select or checkbox list

Form builder

by Suhendra Katrali, 1 year ago

8 4267

Emit Livewire event from Table Actions

Table builder

by Uzzair B, 1 year ago

1 2243

camya

1 year ago

I have created a filament plugin to help you enter titles & slugs, which includes the feature described above.

"Title with Slug" Input - Simple Permalink Slugs for Filament Forms

https://filamentphp.com/plugins/title-with-slug-permalink

Simply add the Field to your Filament form, and all title and slug related editing functions are available.

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    fieldTitle: 'title',
    fieldSlug: 'slug',
)

Best, Andreas

Mohammad Salehi

6 months ago

It does not work with Filament v3. have anyone a solution ?

👍 1

Caspar Bisschop

5 months ago

Mabe you have to change ->reactive() in ->live(onBlur: true)

Kyle Mabaso

5 months ago

Here's how I got it working:

Forms\Components\TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->live(onBlur: true)
    ->afterStateUpdated(function (Set $set, $state) {
        $set('slug', Str::slug($state));
    }),
Forms\Components\TextInput::make('slug')
    ->required()
    ->maxLength(255),

Don't forget to import Set (use Filament\Forms\Set;)