Action Modals

Introduction

Actions can open modals before executing, allowing you to collect additional information from users or require confirmation for important operations. Modals can contain forms, wizards, custom content, and action buttons.

Confirmation modals

The simplest modal is a confirmation dialog that asks users to verify their intent before executing a destructive action:

use Filament\Actions\Action;

Action::make('delete')
    ->requiresConfirmation()
    ->action(fn () => $this->post->delete())

Confirmation modals are not available when using url() instead of action(). If you need to redirect to a URL after confirmation, do so within the action() closure.

Customizing confirmation text

You can customize the modal’s heading, description, and submit button label:

Action::make('delete')
    ->requiresConfirmation()
    ->modalHeading('Delete post')
    ->modalDescription('Are you sure you\'d like to delete this post? This cannot be undone.')
    ->modalSubmitActionLabel('Yes, delete it')
    ->action(fn () => $this->post->delete())

Form modals

You can render a form inside a modal to collect data from users before the action executes:

Disabling form fields

Make all form fields read-only using disabledForm():

Action::make('approvePost')
    ->schema([
        TextInput::make('title'),
        Textarea::make('content'),
    ])
    ->disabledForm()
    ->action(fn (Post $record) => $record->approve())

Wizard modals

Create multi-step workflows inside modals using wizards:

use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Filament\Schemas\Components\Wizard\Step;

Action::make('create')
    ->steps([
        Step::make('Name')
            ->description('Give the category a unique name')
            ->schema([
                TextInput::make('name')->required(),
                TextInput::make('slug')->required(),
            ]),
        Step::make('Description')
            ->description('Add some extra details')
            ->schema([
                MarkdownEditor::make('description'),
            ]),
        Step::make('Visibility')
            ->description('Control who can view it')
            ->schema([
                Toggle::make('is_visible')
                    ->label('Visible to customers')
                    ->default(true),
            ]),
    ])
    ->action(function (array $data) {
        Category::create($data);
    })

By default, users must complete each step in order. Allow free navigation with skippableSteps():

Action::make('create')
    ->steps([...])
    ->skippableSteps()

You can render custom Blade views inside your modals:

Action::make('showDetails')
    ->modalContent(view('filament.modals.post-details'))
    ->modalContentFooter(view('filament.modals.post-footer'))

Passing data to views

Pass data to your custom views using a closure:

Action::make('showDetails')
    ->modalContent(fn (Post $record): View => view(
        'filament.modals.post-details',
        ['post' => $record],
    ))

Nested actions

You can open child action modals from parent actions:

Action::make('edit')
    ->schema([...])
    ->extraModalFooterActions([
        Action::make('delete')
            ->requiresConfirmation()
            ->action(fn () => $this->post->delete())
            ->cancelParentActions(),
    ])

Use cancelParentActions() to close parent modals when a child action completes. You can pass a specific parent action name to only cancel that action and its children.

Closing behavior

Control how users can close the modal:

Action::make('updateAuthor')
    ->closeModalByClickingAway(false)

Action::make('updateAuthor')
    ->closeModalByEscaping(false)

Action::make('updateAuthor')
    ->modalCloseButton(false)

Make the header and footer always visible:

Action::make('edit')
    ->slideOver()
    ->stickyModalHeader()
    ->stickyModalFooter()

Disabling autofocus

Prevent the modal from automatically focusing the first field:

Action::make('updateAuthor')
    ->modalAutofocus(false)

Advanced techniques

Conditionally hiding modals

Show or hide the modal based on conditions:

Action::make('create')
    ->modalHidden(fn () => $this->user->isAdmin())
    ->action(fn () => $this->createPost())

Run code when the modal opens:

use Filament\Schemas\Schema;

Action::make('create')
    ->mountUsing(function (Schema $form) {
        $form->fill(['status' => 'draft']);
        
        // Additional setup code
    })

Optimizing performance

Tell Filament a modal exists to skip the existence check:

Action::make('updateAuthor')
    ->modal() // Skips the check
    ->schema([...])

Extra HTML attributes

Add custom attributes to the modal window:

Action::make('updateAuthor')
    ->extraModalWindowAttributes([
        'class' => 'update-author-modal',
        'data-modal-type' => 'form',
    ])

Getting Started

Panel Builder

Core Concepts

Building Blocks

Advanced

Introduction

Confirmation modals

Customizing confirmation text

Form modals

Disabling form fields

Wizard modals

Allowing step navigation

Passing data to views

Nested actions

Closing behavior

Sticky header and footer

Disabling autofocus

Advanced techniques

Conditionally hiding modals

Optimizing performance

Extra HTML attributes

​Introduction

​Confirmation modals

​Customizing confirmation text

​Form modals

​Disabling form fields

​Wizard modals

​Allowing step navigation

​Modal appearance

​Custom modal content

​Passing data to views

​Modal footer actions

​Nested actions

​Modal behavior

​Closing behavior

​Sticky header and footer

​Disabling autofocus

​Advanced techniques

​Conditionally hiding modals

​Executing code on modal open

​Optimizing performance

​Extra HTML attributes

Introduction

Confirmation modals

Customizing confirmation text

Form modals

Disabling form fields

Wizard modals

Allowing step navigation

Modal appearance

Custom modal content

Passing data to views

Modal footer actions

Nested actions

Modal behavior

Closing behavior

Sticky header and footer

Disabling autofocus

Advanced techniques

Conditionally hiding modals

Executing code on modal open

Optimizing performance

Extra HTML attributes