FilamentF
Filament•2y ago
remoteboy

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'),

I've attached a screenshot for how it currently renders.
Screenshot_2024-04-17_at_10.01.11.png
Was this page helpful?