Filament: Add Custom Button to Form - Reset Example to Clear Fields

In Filament forms, there are "Create" and "Cancel" buttons. What if you want to add another Action, like "Reset" to clear all/some fields? Let's see how to do it.

Adding Action Button

In this example, we have a ProductResource Filament resource and want to set the name and description fields. But because the slug here is auto-generated, we must also clear that one, too. So, we will clear three fields.

First, let's add the Action itself. Because this is a create page, we need to add it to the Create class.

app/Filament/Resources/ProductResource/Pages/CreateProduct.php:

use Filament\Actions;
 
class CreateProduct extends CreateRecord
{
    protected static string $resource = ProductResource::class;
 
    protected function getFormActions(): array
    {
        return array_merge(parent::getFormActions(), [
            Actions\Action::make('clear')
                ->action(function () {
                    // action goes here
                })
            ],
        );
    }
}

Now, we can reset the form in the action methods closure.

Option 1. Reset/Clear ALL Form

If you need to reset the whole form, we just need to reinitialize it.

protected function getFormActions(): array
{
    return array_merge(parent::getFormActions(), [
        Actions\Action::make('clear')
            ->action(function () {
                $this->form->fill(); 
            })
        ],
    );
}

Option 2. Reset/Clear SPECIFIC Fields

There are two ways to reset just some fields, both using Livewire methods.

Because Filament saves all form data into a $data array property, we need to append data.

The first way is to use $this->reset() method.

protected function getFormActions(): array
{
    return array_merge(parent::getFormActions(), [
        Actions\Action::make('clear')
            ->action(function () {
                $this->reset('data.name', 'data.slug', 'data.description'); 
            })
        ],
    );
}

The second method is to use the magic action $set. For this method, first, the function needs to accept the Filament\Forms\Set class.

protected function getFormActions(): array
{
    return array_merge(parent::getFormActions(), [
        Actions\Action::make('clear')
            ->action(function (Set $set) { 
                $set('data.name', '',);
                $set('data.slug', '',);
                $set('data.description', '');
            }) 
        ],
    );
}

Show Success Notification

We can also notify the user that the form was cleared using Filament Notifications.

protected function getFormActions(): array
{
    return array_merge(parent::getFormActions(), [
        Actions\Action::make('clear')
            ->action(function () {
                $this->reset('data.name', 'data.slug', 'data.description');
 
                Notification::make() 
                    ->title('The form has been cleared')
                    ->success()
                    ->send(); 
            })
        ],
    );
}

Here's the result:

If you want more Filament examples, you can find more real-life projects on our FilamentExamples.com.