Filament•8mo 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•8mo ago

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

remoteboyOP•8mo 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•8mo 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

remoteboyOP•8mo ago

Oh nice

Gaming

Programming

Align a toggle to the right of a field