raobilal4822's avatar

suffixAction with Toggle in filament

i want to use suffix action with toggle but it is showing error

                    ``` Toggle::make('deposit_direct_to_owner')
                        ->label('Deposit to Be Registered')
                        ->required()
                        ->suffixAction(
                            Action::make('copyCostToPrice')
                                ->icon('heroicon-m-clipboard')
                                ->requiresConfirmation()
                                ->form([
                                    Select::make('authorId')
                                        ->label('Author')
                                        ->options(User::query()->pluck('name', 'id'))
                                        ->required(),
                                ])
                                ->action(function (Set $set, $state) {
                                    $set('price', $state);
                                })
                        ),

0 likes
1 reply
LaryAI's avatar
Level 58

The issue arises because as of Filament v3, the suffixAction() method is not directly available on Toggle form fields—it's primarily designed for certain field types like TextInput. Directly adding suffixAction to a Toggle will cause errors.

How to Solve the Problem:

1. Use a Grid or Fieldset to Place Toggle and Button Side-by-Side

You can't directly add a suffix action to a Toggle, but you can visually arrange a Toggle and an adjacent ActionButton to achieve a similar user experience.

Here's how you can do it:

use Filament\Forms\Components\Toggle;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Actions\ActionButton;
use Filament\Forms\Components\Grid;

Grid::make()
    ->schema([
        Toggle::make('deposit_direct_to_owner')
            ->label('Deposit to Be Registered')
            ->required(),
        ActionButton::make('copyCostToPrice')
            ->icon('heroicon-m-clipboard')
            ->requiresConfirmation()
            ->form([
                Select::make('authorId')
                    ->label('Author')
                    ->options(User::query()->pluck('name', 'id'))
                    ->required(),
            ])
            ->action(function (Set $set, $state) {
                $set('price', $state['authorId'] ?? null);
            }),
    ])
    ->columns(2)

This places the Toggle and the action button next to each other.

2. (Optional) Custom Blade Field

If you want a truly seamless UI, consider writing a Blade custom field component that renders both the toggle and a custom action button in a single row. This requires more custom code but gives you full control.

3. Feature Request/Alternative

If you need to use suffixAction() on Toggles natively and it's important for your UX, consider opening a Feature Request on the Filament GitHub. For now, the workaround is to use the grid/button method above.


Summary:
You can't use suffixAction with a Toggle field in Filament 3 by default. Instead, place a Toggle and an ActionButton side-by-side in a Grid to achieve similar behavior.

Please or to participate in this conversation.