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

acquaintsoft logo
Acquaint Softtech

Hire Laravel developers with AI expertise at $20/hr. Get started in 48 hours.

Visit Acquaint Softtech

The latest

View all →
PayZephyr: One Payment API for Stripe, Paystack, and PayPal image

PayZephyr: One Payment API for Stripe, Paystack, and PayPal

Read article
Bifrost Turns One With AI Builds and New Workflows image

Bifrost Turns One With AI Builds and New Workflows

Read article
Preview Blade Templates in macOS Finder with Quick Blade image

Preview Blade Templates in macOS Finder with Quick Blade

Read article
Artisan Debugging Commands in Laravel Telescope 5.24.0 image

Artisan Debugging Commands in Laravel Telescope 5.24.0

Read article
Queue totalSize() and JobInterrupted Event in Laravel 13.31 image

Queue totalSize() and JobInterrupted Event in Laravel 13.31

Read article
Find Unexpected Test Inputs with Fuzz for Pest image

Find Unexpected Test Inputs with Fuzz for Pest

Read article