Laravel Livewire Form Wizard | Laravel News

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:

 1namespace App\Http\Livewire;
 2 
 3use Vildanbina\LivewireWizard\WizardComponent;
 4use App\Models\User;
 5 
 6class UserWizard extends WizardComponent
 7{
 8    public array $steps = [
 9        General::class,
10        // Other steps...
11    ];
12 
13    // My custom class property
14    public $userId;
15 
16    /*
17     * Will return App\Models\User instance or will create empty User (based on $userId parameter)
18     */
19    public function model()
20    {
21        return User::findOrNew($this->userId);
22    }
23}

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:

 1// Reset the form
 2$wizardFormInstance->resetForm();
 3 
 4// When you want to have current step instance. You can use:
 5$wizardFormInstance->getCurrentStep();
 6 
 7// When you want to go to specific step. You can use:
 8$wizardFormInstance->setStep($step);
 9 
10// Or, you want to go in the next step:
11$wizardFormInstance->goToNextStep();
12 
13// Or, you want to go in the prev step:
14$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:

1<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.