Filament•3mo ago

Align a toggle to the right of a field

Hi, I'm trying to set up a form with a title input and a slug input. The slug is autmatically generated from the title, but I'd like the user to have the option of editing the slug. Visually it would be nice to place the toggle to the right of the input box. I'm wondering whether there is an elegant solution for this available in Filament? This is my current code (i haven't added any reactivity to the toggle yet)

TextInput::make('title')
                    ->required()
                    ->maxLength(255)
                    ->live($debounce = true)
                    ->afterStateUpdated(function (Get $get, Set $set, ?string $operation, ?string $old, ?string $state, ?Model $record) {

                        if ($operation == 'edit' && $record->isPublished()) {
                            return;
                        }

                        if (($get('slug') ?? '') !== Str::slug($old)) {
                            return;
                        }

                        $set('slug', Str::slug($state));
                    }),
                TextInput::make('slug')
                    ->required()
                    ->readOnly()
                    ->maxLength(255),
                Toggle::make('slug_is_editable')
                ->label('Edit Slug'),

TextInput::make('title')
                    ->required()
                    ->maxLength(255)
                    ->live($debounce = true)
                    ->afterStateUpdated(function (Get $get, Set $set, ?string $operation, ?string $old, ?string $state, ?Model $record) {

                        if ($operation == 'edit' && $record->isPublished()) {
                            return;
                        }

                        if (($get('slug') ?? '') !== Str::slug($old)) {
                            return;
                        }

                        $set('slug', Str::slug($state));
                    }),
                TextInput::make('slug')
                    ->required()
                    ->readOnly()
                    ->maxLength(255),
                Toggle::make('slug_is_editable')
                ->label('Edit Slug'),

I've attached a screenshot for how it currently renders.

4 Replies

ericmp•3mo ago

this is how i'd do it: setup a grid component with 3 cols each item in the schema ->colSpan(1)

remoteboy•3mo ago

Went a different way with this in the end and used Form Actions to lock and unlock the field. Code needs a bit of refactoring but it looks like this now -

TextInput::make('slug')
                    ->required()
                    ->live($debounce = true)
                    ->readOnly(function () use (&$isSlugReadOnly) {
                        return $isSlugReadOnly ? true : false;
                    })
                    ->maxLength(255)
                    ->suffixAction(
                        Action::make('allowSlugEdit')
                            ->icon(function () use (&$isSlugReadOnly) {
                                return $isSlugReadOnly ? 'heroicon-m-lock-closed' : 'heroicon-m-lock-open';
                            })
                            ->action(function () use (&$isSlugReadOnly) {
                                $isSlugReadOnly = !$isSlugReadOnly;
                            })
                    ),

TextInput::make('slug')
                    ->required()
                    ->live($debounce = true)
                    ->readOnly(function () use (&$isSlugReadOnly) {
                        return $isSlugReadOnly ? true : false;
                    })
                    ->maxLength(255)
                    ->suffixAction(
                        Action::make('allowSlugEdit')
                            ->icon(function () use (&$isSlugReadOnly) {
                                return $isSlugReadOnly ? 'heroicon-m-lock-closed' : 'heroicon-m-lock-open';
                            })
                            ->action(function () use (&$isSlugReadOnly) {
                                $isSlugReadOnly = !$isSlugReadOnly;
                            })
                    ),

LeandroFerreira•3mo ago

You can also use a hintAction https://filamentphp.com/docs/3.x/forms/actions#adding-a-hint-action-to-a-field

Actions - Form Builder - Filament

remoteboy•3mo ago

Oh nice

Gaming

Programming

Align a toggle to the right of a field