Lightweight Livewire component to build wizards (multi-step forms)

Lightweight Livewire component that allow you to easily build a wizard (multi-step form).

This package utilizes Livewire 3 forms objects as steps and needs only one Livewire component as a Wizard.

Here's what a wizard could look like.

In this repo on GitHub, you'll find a demo Laravel application that uses the laravel-livewire-steps package to create a simple email subscription flow.

Installation

You can install the package via composer:

composer require satoved/laravel-livewire-steps

Usage

Create a Livewire component that extends WizardComponent. List all steps in the correct order as public properties.

use Satoved\LivewireSteps\Livewire\WizardComponent;

class EmailSubscriptionWizard extends WizardComponent
{
    public NameStep $nameStep;
    public EmailStep $emailStep;

    public function render()
    {
        return <<<'BLADE'
            <form wire:submit="nextStep">
                {{ $this->renderStep() }}
                <button>Next</button>
            </form>
BLADE;
    }
}

Each step is a Livewire form object that must extend StepForm.

use Satoved\LivewireSteps\Livewire\Forms\StepForm;

class EmailStep extends StepForm
{
    #[Validate(['required', 'email'])]
    public $email;

    public function render()
    {
        return '<input type="email" wire:model="emailStep.email">';
    }
}

Testing

composer test

Alternatives

This package was heavily inspired by spatie/laravel-livewire-wizard. It's a great package, but each step has to be a Livewire component, and you get two requests for a parent component and the step component each time. Which is in overkill for my use cases.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Oleg Shovkun
• All Contributors

License

The MIT License (MIT). Please see License File for more information.