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.

clear form action and notification


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:

clear form action and notification


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

avatar

Well done

avatar

How can I add similar buttons/actions on the View page?

Using method getHeaderActions() I can add actions to header, but getFormActions() doesn't work on View page.

avatar

It's logic that getFormActions() doesn't work because it isn't an action. And i don't see there can be any actions. If you are using infolist I think you could add action to it. Something like this:

public static function infolist(Infolist $infolist): Infolist
{
		return $infolist
				->schema([
						// ..
						Actions::make([
								Action::make('reply')
										->action(function (array $data): void {
												// your action
										})
						]),
				]);
}
avatar

i need to make view page for table and remove at it i useing it for view contact

avatar

Edit the form of the page

    protected function getFormActions(): array
    {
        return array_merge(parent::getFormActions(), [
            Actions\Action::make('reset')
                ->action(function () {
                    $this->fillForm();
                    Notification::make()
                        ->title('The form has been reseted ')
                        ->success()
                        ->send();
                })
        ],
        );
    }

avatar

Is there a way we can align this new action to the right? So to separate it from the rest of Form Actions?

avatar

Dont think so. You csn change

Like our articles?

Become a Premium Member for $129/year or $29/month
What else you will get:
  • 60 courses (1084 lessons, total 42 h 44 min)
  • 80 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials