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.

Align a toggle to the right of a field

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.

Align a toggle to the right of a field

Similar Threads

Align a toggle to the right of a field

Similar Threads

Similar Threads

Similar Threads