Laravel Livewire Form Wizard

Published on March 17th, 2022 by Paul Redmond

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();