Introduction
Wizards create multistep forms with validation between steps:
use Filament\Schemas\Components\Wizard;
use Filament\Schemas\Components\Wizard\Step;
Wizard::make([
Step::make('Order')
->schema([
// ...
]),
Step::make('Delivery')
->schema([
// ...
]),
Step::make('Billing')
->schema([
// ...
]),
])
For panel resources or action modals, see the specific documentation for those contexts.
use Illuminate\Support\HtmlString;
Wizard::make([
// ...
])->submitAction(view('order-form.submit-button'))
Wizard::make([
// ...
])->submitAction(new HtmlString('<button type="submit">Submit</button>'))
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\HtmlString;
Wizard::make([
// ...
])->submitAction(new HtmlString(Blade::render(<<<BLADE
<x-filament::button
type="submit"
size="sm"
>
Submit
</x-filament::button>
BLADE)))
The HTML or view for the submit button.
Step icons
Add icons to steps:
use Filament\Support\Icons\Heroicon;
Step::make('Order')
->icon(Heroicon::ShoppingBag)
->schema([
// ...
])
icon
string | BackedEnum | Htmlable | Closure
The icon to display.
Completed icons
Customize icons for completed steps:
Step::make('Order')
->completedIcon(Heroicon::HandThumbUp)
->schema([
// ...
])
icon
string | BackedEnum | Htmlable | Closure
The icon for completed steps.
Step descriptions
Add descriptions to steps:
Step::make('Order')
->description('Review your basket')
->schema([
// ...
])
description
string | Htmlable | Closure
The step description.
Default active step
Set which step loads by default:
Wizard::make([
// ...
])->startOnStep(2)
Skippable steps
Allow free navigation between steps:
Wizard::make([
// ...
])->skippable()
condition
bool | Closure
default:"false"
Whether steps can be skipped.
Persisting the current step
Persist the current step in the URL query string:
Wizard::make([
// ...
])->persistStepInQueryString()
Wizard::make([
// ...
])->persistStepInQueryString('wizard-step')
key
string | Closure
default:"'step'"
The query string parameter name.
Step lifecycle hooks
Run code before and after step validation:
Step::make('Order')
->afterValidation(function () {
// ...
})
->beforeValidation(function () {
// ...
})
->schema([
// ...
])
Preventing navigation
Throw Halt to prevent moving to the next step:
use Filament\Support\Exceptions\Halt;
Step::make('Order')
->afterValidation(function () {
if (true) {
throw new Halt();
}
})
->schema([
// ...
])
Grid columns in steps
Customize the grid within steps:
Step::make('Order')
->columns(2)
->schema([
// ...
])
The number of columns or responsive configuration.
Customizing actions
Customize the next and previous buttons:
use Filament\Actions\Action;
Wizard::make([
// ...
])
->nextAction(
fn (Action $action) => $action->label('Next step'),
)
->previousAction(
fn (Action $action) => $action->label('Previous step'),
)
A closure that receives and modifies the action.