Sign up to access "Livewire Multi Step Forms" right now.

and then each of our steps are responsible for showing what that step has. So if we head over to the Laravel Livewire wizard package, what we really need to do in terms of the documentation here is just look at the installation instructions. So I'm going to go ahead and grab the package

and then I'm going to walk you through everything you need to know about this. So let's go ahead and pull this package in and once we have done that, we are pretty much ready to go and start creating our first component. So we just want to create a normal Livewire component here.

So let's go ahead and make the first example, which is the example of creating that thing. Now I'm literally going to call this thing because I can't think of a better example. So we're going to go ahead and create this now. Now what I want to do, especially when I'm working with multi-step forms,

is really think about the directory structure here. We don't just want to create a standard component anywhere. We want to make sure that this is structured really nicely so we can easily find the base wizard and also find each of the steps.

So if we think about this, I kind of want to put this in a directory like things and then create and then the thing. Now I've already got some history here from what I've already done, but let's go and create inside of a things directory.

That's the thing that we're creating. A create directory because we might have another multi-step form to update something and then inside of here, we'll create a create thing component. So let's do that first of all.

Take a look at the directory structure and this will start to make sense when we eventually get to steps. So if we look inside of our Livewire directory here, we've got things, create. We know that all of these steps are responsible for creating

and we've got create thing. So let's go ahead and just get this on the page. So Livewire now because we've done this we need to go into things, create, create thing and we should be good.

Let's just update our template just so we know that this is working. And there we go. So that's the structure that we're going to follow for all of the examples here. I just find it makes it really easy to find stuff.

Okay. So now that we've done this we need to create this as a wizard. So let's go over to the main create thing component. So the actual Livewire component here. And instead of extending the base Livewire component,

we're going to extend the wizard component from this package. Now when we do this, you can see that my editor is telling me here that I need to implement a method here. It's not giving me much information.

The first thing that we can do is just get rid of the render method because we don't need an overall render method for our entire wizard. Each of the steps are responsible for rendering. Now inside of here, what we do need is a steps function which returns an array.

So we could even go ahead and type in that in there. Now we're going to return an empty array here just for now, just to get this working and let's head over and give this a refresh. Okay. So we didn't get any steps.

It's telling us this package is telling us that we haven't returned any steps. So our next job is to create out a step. So let's go ahead and do that. And again, this is going to be exactly the same thing.

It's just going to be a live wire component which extends a specific class. So let's think about our directory structure. We've got live wire things and create. I want all my steps to go in a separate directory within this,

just so I can easily access the steps and it doesn't get confused with this main component. So let's go ahead and do the same thing, but let's create out our steps and let's choose the name of our first step. So this is going to be the title step.

So we're going to set a title, a description and then we're going to have a final review step to review what we've done and publish it. So let's create a title step and while we're here, let's just create all of these just so we can switch them all over together.

So we're going to have a description step and then finally we are going to have a publish step. So let's create that out as well. Great. So we've got three steps that we can play with here.

So let's go over and just have a really quick look at our directory structure just so we are 100% clear. You can see here that under steps, I've now got these steps very easily accessible and the same thing obviously with the templates here as well. Okay. So now inside of steps, what I need to do is just give the fully qualified class name.

We don't need to new these up to each of the steps. So we know that we've got a title step. So let's bring that component in here and grab the fully qualified class name for that. We'll do the same thing for our description step as well.

So let's go ahead and just fill this in description step and let's find that. Great. And then of course our final is our publish step. So let's pull that in as well and of course make sure you import these at the top as well. Okay. So now that we've got our steps, let's give the page another refresh

and sure enough we've got another helpful error. So a valid step component should extend the step component. That kind of makes sense. We want all of the functionality of a step. So let's go over to our title step and we're going to extend this step component class from this package

and we'll do the same thing for each of our steps. So let's do this for our description step and we'll do this for our publish step as well. So that is step component and we're pretty much done. Let's head over give this a refresh and there we go.

So what we've now successfully done is created a wizard with each of these steps and all of the functionality is now within the wizard and each of the steps. So let's go ahead and just fill in our first step just with that title input and then we can move on look at how we navigate between steps.

So over in the title step component, we just treat this like a normal live wire component. There are some very specific things within this package. We need to watch out for like the state that it stores, but let's go ahead and just create out a string in here called title.

That's all of the information that we want to capture for this first step. So we're not going to add validation just yet. We'll do that in a minute, but let's go over to our title step component and we'll just fill this in again like we normally would. So I'm going to head over to the login page

and I'm just going to borrow some of the components that we already have for our inputs in here. So let's just grab all of these we can go ahead and put a form directly in here or we could make this whole thing a form. It doesn't really matter too much. Let's just pop this in here tidy up and we should be good to go.

So let's pull all of this stuff in and we'll just group this together. So it's a little bit easier. So this is going to be the title we can change the value over here. This is going to be for the title. We're going to have a type of text and a name of text and we'll get rid of required

and we'll get rid of autocomplete there as well. And of course for the errors, we're still going to be validating here. So we'll make sure that we have our errors in there. Okay, so type of text name of title

and I think we should be good. Okay, if we head over there we go. There is the content in our first step. Great. Okay. So next up, let's just add a really simple button. So again, we'll pull this in from the login page just

so we don't have to write anything out manually and let's go ahead and say next step and we'll get rid of this and we should be good. There we go. Okay, we'll space things out and then we're pretty much done here.

We won't spend too much time on this. So let's say space Y of 6 and there we go. Great. So we've got our title in here, but at the moment we can't navigate between steps.

Now there are a couple of ways that you can navigate between steps. We're going to be looking at the way that we do this programmatically directly from the component now and later on we'll look at how we do this

with the navigation that we saw at the top. But the goal here is to click next step and just go to the next step. So let's cover that in the next episode.