How can I create dynamic form fields into Wizard Form using Livewire 3

Question

Task

I need to implement behavior in my wizard form where users can generate multiple input fields, fill them out, and upon clicking the submit button, save them to the database to create a recipe instance.

My thoughts

However, I’m struggling to figure out the logic for handling dynamic input fields in my form.

In my opinion, handling everything within a single Livewire component (both step-by-step form data and dynamic field logic) seems too bulky.

On the other hand, if I create a second Livewire component specifically for handling dynamic fields and include it in the wizard form, I don't understand how one Livewire component can retrieve data from another Livewire component when the submit button is clicked.

And to be honest, I’m not even sure if I should use Livewire for dynamic fields at all. I've seen opinions suggesting that it might be overkill since every update would trigger a request to the server. Some suggested using sessions instead, but I feel like that would be inconvenient.

What it should look like

Picture of this wizard form: https://i.ibb.co/k6vpMYD3/wizard-form.jpg. I've already created a Livewire component with those steps

Regarding the logic, this is how I envision the workflow when a user interacts with my wizard form:

Info (Step 1)

The user fills in standard input fields, uploads an image, and writes a recipe description.

Ingredients (Step 2)

The user sees three input fields: Info | Quantity | Unit These fields are placed in a single row to represent one ingredient (name, amount, and measurement unit). By clicking the "+" button below the table, the user can add more rows, creating multiple ingredients (e.g., instead of one, they could add seven).

Guide (Step 3)

Similar to Step 2, but here the user fills in two input fields: Photo and Description. Each block represents one cooking step with an image and text. The user can generate additional steps by clicking the "+" button (e.g., creating five steps for the recipe). Like in Step 2, there will also be a delete button to remove a specific step. (Sorry for the long message!)

Code

class RecipeWizard extends Component
{
    public $form_step = 1;

    public $dishCategories;
    public $cuisines;
    public $menus;

    public function mount()
    {
        $this->dishCategories = DishCategory::get();
        $this->cuisines = Cuisine::get();
        $this->menus = Menu::get();
    }

    // From the db soon
    public array $units = [
        'kg', 'g', 'piece',
        'head', 'liter', 'to taste',
        'bunche', 'twig', 'stem'
    ];

    public function next_step()
    {
         $this->form_step++;
    }

    public function prev_step()
    {
         $this->form_step--;
    }

    public function render()
    {
        return view('livewire.recipe-wizard');
    }
}

If anyone has worked on a similar task, I'd be glad to have your help.

if the answer helpt you or has provided ou with the answer please accept the answer to the question — oelimoe
– oelimoe, Commented Mar 26 at 8:31

Lucas · Accepted Answer · 2025-03-06 15:50:36Z

In my opinion, handling everything within a single Livewire component (both step-by-step form data and dynamic field logic) seems too bulky.

It's up to you, there's no really better solution, just keep in mind that if you will reuse this exact same form somewhere else it is obvious that you should put it in a dedicated Form object. Otherwise, do as you think its the best to you to handle it.

And to be honest, I’m not even sure if I should use Livewire for dynamic fields at all. I've seen opinions suggesting that it might be overkill since every update would trigger a request to the server. Some suggested using sessions instead, but I feel like that would be inconvenient.

Triggering a request for every update isn't a bad thing by itself since Livewire have been designed to work with lifecycles events, it just depends how you handle it. There's nothing bad in triggering a request if you want to add another input in the step 2 of your form, it just depends how you manage the lifecycles of your component.

My way to handle that would be to create regular public properties for each of your form inputs, then for the dynamic inputs case i'd create public array properties and just iterate on them. This tutorial is a good example of that solution.

Once you submit the form make sure to validate the inputs if needed and store the data it the way you need it.

I hope this will help.

Collectives™ on Stack Overflow

How can I create dynamic form fields into Wizard Form using Livewire 3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related