Laravel Packages

Laravel Livewire Form Wizard

Published
Laravel Livewire Form Wizard image

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

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:

namespace App\Http\Livewire;

use Vildanbina\LivewireWizard\WizardComponent;
use App\Models\User;

class UserWizard extends WizardComponent
{
    public array $steps = [
        General::class,
        // Other steps...
    ];

    // My custom class property
    public $userId;
    
    /*
     * Will return App\Models\User instance or will create empty User (based on $userId parameter) 
     */
    public function model()
    {
        return User::findOrNew($this->userId);
    }
}

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:

// Reset the form
$wizardFormInstance->resetForm();

// When you want to have current step instance. You can use:
$wizardFormInstance->getCurrentStep();

// When you want to go to specific step. You can use:
$wizardFormInstance->setStep($step);

// Or, you want to go in the next step:
$wizardFormInstance->goToNextStep();

// Or, you want to go in the prev step:
$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:

<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.

Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Sponsored

laravelcloud logo
Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Cloud

The latest

View all →
Slow Job Alerts and Replica Commit IDs in Laravel 13.40 image

Slow Job Alerts and Replica Commit IDs in Laravel 13.40

Read article
Flock: A Free, Native Herd Alternative for Laravel image

Flock: A Free, Native Herd Alternative for Laravel

Read article
Live Props for Real-Time Updates in Inertia.js v3.11 image

Live Props for Real-Time Updates in Inertia.js v3.11

Read article
Cooldown Dependency Policy now in Composer 2.11 image

Cooldown Dependency Policy now in Composer 2.11

Read article
Email Sending and Testing for Laravel in One Account image

Email Sending and Testing for Laravel in One Account

Read article
Decide with Jev: Tie Every AI Check to the Exact Draft image

Decide with Jev: Tie Every AI Check to the Exact Draft

Read article