Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I am working on some basic page right now. I never used Blade components before.
The page is divided into 2 sections: Left and Right.
On the right side, there is a form that has a few "steps" before reaching the Confirm button.
The flow is that a user can click next or previous on this section to modify his selections/inputs until he wants to send the data.
This form on the right section has 3 steps, so on every step there are different form inputs.
What I would do normally is to either have the 3 steps hard coded in the Blade file, and then use JS to just hide or show each step, or use JS to construct the elements and use something like innerHTML or createElement.
But can Blade components do the job as well? So that I will make a new components for each "step", which will be the form step and then somehow display it when the user click Next or Previous? So that I won't have all the mess in one Blade file but it would be separated into reusable components?
View components can be used with javascript but anything like this with different 'asynchronous' steps, I would advise using either Laravel Livewire or Vue.js. Both of these work well with javascript. Laravel Livewire works well with Alpine.js. Vue.js would help compliment any javascript you're currently using.
Livewire: https://laravel-livewire.com/ Alpinejs: https://alpinejs.dev/
@jaseofspades88 Thank you, It's not async, it's basically 3 steps to fill some information before sending it. Each "next" step does not send the data yet, just saves it. Only when "Confirm" on the last step is clicked it sends the data
Edit: It looks something like that:
Step 1:
First Name: _______
Last Name: _______
Next->
Step 2:
Choose card: [Select]
Enter amount: _____
<--Previous Next-->
Step 3:
Confirm details:
..showing summary..
(Confirm Button)
<--Previous
@Ligonsker - the easiest way to do this would be using blade component with alpinejs to hide the stages but this really raises more questions.. such as 'how do we handle validation?'. I would use Livewire and build out the form component, making it easy to add stages if necessary, validate the data between each step and persist it at the end. But this isn't really an 'answer' to the initial thread... it's a little too vague... bringing to back to the main question..
Are Blade components good for reusable sections of page that needs to be toggled with JavaScript?
The answer is variable. If you're using a lightweight js framework like alpinejs then yes. If you're looking to embed vanilla javascript then yes too, but it'll just be messier. There isn't really a better way to answer that generic question
Blade must be processed at the server BEFORE sending to the browser. So if you dont want to roundtrip on each step then components (or includes) will be no use to you in this case
Please or to participate in this conversation.