Laravel Packages

Laravel Livewire Form Wizard

Published
Laravel Livewire Form Wizard image

Laravel Livewire Wizard is a Livewire component that provides you with a wizard that supports multiple steps form while maintaining state.

This package leverages WireUI for the design and TailwindCSS and Alpine.js. To use this package, you define a wizard form (you can use the package's make:livewire to create the component) extending the base wizard component:

namespace App\Http\Livewire;
 
use Vildanbina\LivewireWizard\WizardComponent;
use App\Models\User;
 
class UserWizard extends WizardComponent
{
public array $steps = [
General::class,
// Other steps...
];
 
// My custom class property
public $userId;
 
/*
* Will return App\Models\User instance or will create empty User (based on $userId parameter)
*/
public function model()
{
return User::findOrNew($this->userId);
}
}

Notice the $steps property, which you can use to split up a form into multiple steps. Each step will have its state, validation logic, saving logic, and a title that defines the step name in the UI.

You have complete control over the form processing, including navigating between steps, resetting the form, and more:

// Reset the form
$wizardFormInstance->resetForm();
 
// When you want to have current step instance. You can use:
$wizardFormInstance->getCurrentStep();
 
// When you want to go to specific step. You can use:
$wizardFormInstance->setStep($step);
 
// Or, you want to go in the next step:
$wizardFormInstance->goToNextStep();
 
// Or, you want to go in the prev step:
$wizardFormInstance->goToPrevStep();

Steps support Livewire hooks for going into (and out of) steps, updating state, and hooks for after state is updated.

Here's an example Blade component to render the UserWizard:

<livewire:user-wizard user-id="3"/>

If you'd like to learn more about the setup and hooks around form steps, check out the source code on GitHub.

Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Sponsored

serpapi logo
SerpApi

The Web Search API for Your LLM and AI Applications

Visit SerpApi

The latest

View all →
Look What You Helped Me Build image

Look What You Helped Me Build

Read article
BashBox: A Sandboxed Bash Interpreter for AI Agents in PHP image

BashBox: A Sandboxed Bash Interpreter for AI Agents in PHP

Read article
Running Laravel's Scheduler on Multiple Servers image

Running Laravel's Scheduler on Multiple Servers

Read article
Laravel Fake Assertions Now Accept Property Arrays image

Laravel Fake Assertions Now Accept Property Arrays

Read article
Route::query() and Model defaults() in Laravel 13.35 image

Route::query() and Model defaults() in Laravel 13.35

Read article
Laravel AI SDK 1.1 Adds Agent Skills and Cohere Chat image

Laravel AI SDK 1.1 Adds Agent Skills and Cohere Chat

Read article