README

Build wizards using Livewire

This package offers lightweight Livewire components that allow you to easily build a wizard. With "wizard" we mean a multi-step process in which each step has its own screen.

Single-file and multi-file components, as well as class-based components, are supported.

Here's what a wizard component could look like.

{{-- resources/views/components/⚡checkout-wizard.blade.php --}}
<?php

use Spatie\LivewireWizard\Components\WizardComponent;

new class extends WizardComponent
{
    public function steps(): array
    {
        return [
            'checkout.cart-step',
            'checkout.delivery-address-step',
            'checkout.confirm-order-step',
        ];
    }
};
?>

@include('livewire-wizard::wizard')

A step is a component that extends StepComponent (which in its turn extends Livewire\Component). You can do anything in here that you can do with a regular Livewire component.

{{-- resources/views/components/checkout/⚡cart-step.blade.php --}}
<?php

use Spatie\LivewireWizard\Components\StepComponent;

new class extends StepComponent
{
    // add any Livewire powered method you want
};
?>

<div>
    <ul>
        @foreach (session('cart') as $item)
            <li>{{ $item['name'] }}</li>
        @endforeach
    </ul>

    <button wire:click="nextStep">Continue</button>
</div>

Class-based components work the same way, registered with Livewire and listed by class.

namespace App\Components;

use Spatie\LivewireWizard\Components\WizardComponent;

class CheckoutWizardComponent extends WizardComponent
{
    public function steps(): array
    {
        return [
            CartStepComponent::class,
            DeliveryAddressStepComponent::class,
            ConfirmOrderStepComponent::class,
        ];
    }
}

namespace App\Components;

use Spatie\LivewireWizard\Components\StepComponent;

class CartStepComponent extends StepComponent
{
    // add any Livewire powered method you want

    public function render()
    {
        return view('checkout-wizard.steps.cart');
    }
}

You can easily control which step is displayed, access state of other steps, and build any navigation you desire.

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

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Documentation

All documentation is available on our documentation site.

Testing

composer test

Alternatives

Our package is headless. This means that it does not provide UI, but it offers functions to easily build any UI you want. If you do not wish to build your own UI, you could consider using vildanbina/livewire-wizard, which includes pre-built navigation and CSS.

Filament users could also take a look at the built-in wizard functionality.

Another headless package satoved/laravel-livewire-steps that uses Livewire form objects for steps instead of Livewire components can be considered for simpler 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

License

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

spatie / laravel-livewire-wizard

Package info

Security

Statistics