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

laravelcloud logo
Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Cloud

The latest

View all →
Agent Run Observability in Laravel AI SDK 0.11 image

Agent Run Observability in Laravel AI SDK 0.11

Read article
Debounced Queued Event Listeners in Laravel image

Debounced Queued Event Listeners in Laravel

Read article
Statamic Mailables Viewer Previews Laravel Emails in the Control Panel image

Statamic Mailables Viewer Previews Laravel Emails in the Control Panel

Read article
Laravel Tackle: Run an AI Coding Agent in Your Laravel App image

Laravel Tackle: Run an AI Coding Agent in Your Laravel App

Read article
Queue::forward(): Reroute Laravel Queues in One Place image

Queue::forward(): Reroute Laravel Queues in One Place

Read article
Laravel Read-Through Filesystem: Lazy Storage Migration image

Laravel Read-Through Filesystem: Lazy Storage Migration

Read article