Laravel Livewire Form Wizard

Packages

March 17th, 2022

livewire-form-wizard.png

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

Livewire form wizard user form demo

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.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.

Laravel News Partners