DEV Community

Cover image for Laravel Livewire Multi-Step Forms: Validation and Safe Submission
Codegenie
Codegenie

Posted on Edited on

Laravel Livewire Multi-Step Forms: Validation and Safe Submission

Updated for the stable v1.0.0 package release (August 2026). The original project has been refactored from a demo application into an installable Composer package for Laravel 12–13 and Livewire 3–4.

Long forms are easier to complete when they are split into focused steps, but the server-side contract still matters: users must not be able to skip validation, submit before the review step, or inject values outside configured choices.

I built Laravel Livewire Multi-Step Form as a small, configuration-driven package that handles that reusable flow while leaving persistence, authorization, mail, redirects, and rate limiting in your application.

Install it

composer require codegenie-be/laravel-livewire-multistep-form
Enter fullscreen mode Exit fullscreen mode

Requirements:

  • PHP 8.2 through supported PHP 8.x releases
  • Laravel 12 or 13
  • Livewire 3.6+ or 4.x

Laravel package discovery registers the component automatically.

Define fields, not a second application

Pass a field configuration to the registered Livewire component:

<livewire:codegenie-multistep-form
    :fields="[
        'name' => [
            'rules' => 'required|string|min:2|max:120',
            'label' => 'Name',
            'step' => 1,
            'type' => 'text',
        ],
        'email' => [
            'rules' => 'required|email|max:255',
            'label' => 'Email address',
            'step' => 2,
            'type' => 'email',
        ],
        'topic' => [
            'rules' => 'required|string',
            'label' => 'Topic',
            'step' => 2,
            'type' => 'select',
            'options' => [
                'general' => 'General question',
                'support' => 'Support',
            ],
        ],
        'message' => [
            'rules' => 'required|string|min:10|max:5000',
            'label' => 'Message',
            'step' => 3,
            'type' => 'textarea',
        ],
    ]"
/>
Enter fullscreen mode Exit fullscreen mode

Steps start at 1 and remain consecutive. The package currently supports text-like inputs, textarea, and select fields. File uploads, repeaters, nested names, checkboxes, and radio groups are intentionally outside v1.0.0.

Validation is enforced on the server

Each Next action validates only the current step. Final submission is accepted only from the generated review step, then validates the complete form again.

Select option keys form a server-side allow-list. If final validation fails, the wizard returns to the first invalid step and requests focus for that field.

For Laravel rule objects, closures, or application-sensitive validation details, extend the component and keep those rules out of public Livewire state:

use Codegenie\LivewireMultistepForm\Livewire\MultiStepForm;
use Illuminate\Validation\Rule;

class ContactWizard extends MultiStepForm
{
    protected function serverValidationRules(): array
    {
        return [
            'email' => [Rule::unique('users', 'email')],
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode

Your application owns the submission

The base component deliberately does not write to a database or send mail. Extend it when you need server-side persistence:

protected function handleSubmission(array $data): void
{
    ContactRequest::query()->create($data);
}
Enter fullscreen mode Exit fullscreen mode

Only configured, validated fields reach this hook. Authorization, rate limiting, retention, redirects, and other application concerns remain yours.

Accessibility, localization, and styling

The default view includes semantic form and fieldset markup, associated labels and errors, progressbar metadata, visible focus states, focus management, reduced-motion handling, and instance-scoped IDs.

English, Dutch, and French interface translations ship with the package. The Blade view and translations can be published when an application needs custom copy or markup.

The view uses Tailwind utility classes but ships no compiled frontend assets. Tailwind 3 projects add the vendor view path to content; Tailwind 4 projects add it with @source.

Try or inspect it

The package is MIT licensed. Compatibility is tested across Laravel 12–13, Livewire 3–4, and applicable PHP 8.2–8.5 combinations, including minimum dependency sets.

Disclosure: I maintain this open-source package through Codegenie. Feedback on validation edge cases, accessibility, and real-world Livewire 4 usage is especially welcome.

Top comments (0)