Wizards with Livewire - best practice?

I’m sure Livewire can be used to create “wizards” (that contain multiple steps, either submitting partially at each stage or submitting finally at the end) but I’m not sure about best practices.

I’ve tried finding some guides online and really can’t see how to get started with something like this

How are wizards/step by step flows best created with Livewire? Is there any example code/pseudocode somebody could share?

Many thanks!

Last week I made a form where the fields were distributed in tabs. We could say the difference between tabs and the “steps” of a Wizard is resembling. It will depend on how you want control those steps.
One thing I have learned is that you must keep all the Steps in the DOM, hidden by “display:none” otherwise Livewire will complain that some of the public properties are missing and get an error when you pass to the next step (or tab) if you try to control the visibility of the Wizards by, say:

@if($step == 1)
     ...
@endif
@if($step == 2)
     ...
@endif

I managed to make it work like so:

<div class="$step == 1 ? 'd-block' : 'd-none'">...</div>
<div class="$step == 2 ? 'd-block' : 'd-none'">...</div>
<button type="button" wire:click="$set('step', 2)">Next</button>

Also anyone please correct me if I did it wrong :slight_smile:

2 Likes

This is the way I do multi-step as well. It’s clean and expressive in blade so you can really see what’s going on.

I prefer to keep the steps as separate components in combination with emitTo(‘nextComponent’, ‘step-done’). I like to keep the components as small as possible. And I do not need to worry about field validation with hidden/visible fields.

I am thinking to try to have a child component for each step. That way, we don’t have to keep the fields from other steps hidden in the DOM.

This can be useful only for scenarios where the steps can be updated into the database one by one.

i use child component on this with combination of emit

let’s assume you have the main component that can register with.

you can make a child components with multiple emit's and when the user hits next you can save the modifications on the child component separately to the database and go to the next child component and so on until the user achieves the last child component.

you can check Livewire Events and Components.

If you want to save all the user inputs at once you can use tabs it’s easier and faster.

This just came out today. Might help you.

@jdtheman I think it’s Great or your case, you must check that out.

Thanks @daugaard47 For Sharing This!

1 Like