PHPackages rinodrummer/livewire-wizard-form - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. rinodrummer/livewire-wizard-form ActiveLibrary[Utility & Helpers](/categories/utility) rinodrummer/livewire-wizard-form ================================ A step form wizard package for Livewire v0.2.0(1y ago)53[2 PRs](https://github.com/rinodrummer/livewire-wizard-form/pulls)MITPHPPHP ^8.1CI passing Since Apr 8Pushed 1mo ago1 watchersCompare [ Source](https://github.com/rinodrummer/livewire-wizard-form)[ Packagist](https://packagist.org/packages/rinodrummer/livewire-wizard-form)[ Docs](https://github.com/rinodrummer/livewire-wizard-form)[ GitHub Sponsors](https://github.com/rinodrummer)[ RSS](/packages/rinodrummer-livewire-wizard-form/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (14)Versions (10)Used By (0) Livewire Wizard Form — A step form wizard package for Livewire ============================================================== [](#livewire-wizard-form--a-step-form-wizard-package-for-livewire) [![Latest Version on Packagist](https://camo.githubusercontent.com/e88c4c5cea7acb92e37d39f090920b6a79341a155f0a2c16dbb0ae58a7c26d85/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f72696e6f6472756d6d65722f6c697665776972652d77697a6172642d666f726d2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rinodrummer/livewire-wizard-form)[![GitHub Tests Action Status](https://camo.githubusercontent.com/7c5f904ee8e13378f219b36a48180fd2ba792a07e0f960ee3ef05a4172db4a9d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f72696e6f6472756d6d65722f6c697665776972652d77697a6172642d666f726d2f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/rinodrummer/livewire-wizard-form/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/0f6bbfd4360e0030f004304b57ead6a90b7b34fa2e9bd8723813acab314aa323/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f72696e6f6472756d6d65722f6c697665776972652d77697a6172642d666f726d2f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/rinodrummer/livewire-wizard-form/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/be3463270905287be5d09bee6d48a64ec4a56ffd8e3de05cf223afd2369408a6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f72696e6f6472756d6d65722f6c697665776972652d77697a6172642d666f726d2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rinodrummer/livewire-wizard-form) Warning This package is currently under active development. Its use is at the developer's discretion and may include breaking changes or experimental features. Proceed with caution and always test thoroughly before using in production. This package is heavily inspired from [spatie/laravel-livewire-wizard](https://spatie.be/docs/laravel-livewire-wizard), and it lets create wizard forms with steps easily. It provides a set of plug-and-play traits/interfaces that let you introduce mechanics directly into your own [Livewire](https://livewire.laravel.com) components. The concept behind this package is that **every aspect** of its sourcecode can be adapted to your needs, by letting you override every bit you need. Requirements ------------ [](#requirements) The package is compatible with: - [PHP](https://php.net) ≥ 8.2 - [Laravel](https://laravel.com) ≥ 10 - [Livewire](https://livewire.laravel.com) 3 Installation ------------ [](#installation) You can install the package via Composer: ``` composer require rinodrummer/livewire-wizard-form ``` Usage ----- [](#usage) To create a new wizard component, you need to implement the `WizardComponent`interface and use the `IsWizard` trait in a Livewire component you created normally. This trait requires a method to be implemented, which is `steps()`: ``` namespace App\Livewire; use Livewire\Component; use LivewireWizardForm\Wizard\IsWizard; use LivewireWizardForm\Wizard\Contracts\WizardComponent; class CreateUserWizard extends Component implements WizardComponent { use IsWizard; public function steps(): array { return [ // List of the step identifiers ]; } } ``` Usually, this method should return an array of strings, but enums can be used too! When referencing to an enum (which should be a `\BackedEnum`), we need to pair the `steps()` method with the `useEnum()` one, this method usually returns `null`, but in this case we can override it by returning the class-string of the preferred enum which cases are going to represent the steps: ``` namespace App\Livewire; use Livewire\Component; use App\Enums\CreateUserStep; use LivewireWizardForm\Wizard\IsWizard; use LivewireWizardForm\Wizard\Contracts\WizardComponent; /** * @implements WizardComponent * @uses IsWizard */ class CreateUserWizard extends Component implements WizardComponent { use IsWizard; public function useEnum(): ?string { return CreateUserStep::class; } public function steps(): array { return CreateUserStep::cases(); } } ``` Now, the package basically matched for every component named like `-step`, but in some scenarios (especially if paired with enums) maybe needed to customize the logic behind the step components naming/matching, in this case you can override the `currentStepComponent()` method, like in the following example: ``` public function currentStepComponent(): string { $component = match ($this->currentStep()) { CreateUserStep::Profile => UserProfileStep::class, CreateUserStep::Contacts => UserContactsStep::class, CreateUserStep::Avatar => UserAvatarStep::class, CreateUserStep::Preferencies => UserPreferenciesStep::class, }; // Uses Livewire's component name resolution to retrieve the component name return resolve(Livewire\Mechanisms\ComponentRegistry::class) ->getName($component); } ``` Now it's possible to proceed with the wizard Blade part! To render the current step, there is a custom Blade component that has to be included in the Blade file of your component. This is just wrapper for [`livewire:dynamic-component`](https://livewire.laravel.com/docs/nesting#dynamic-child-components)which passes the right set of properties to the current step component: ``` Create a new user ``` Consider that this component will not add any wrapping element but directly include your step components, but you can make this component look as you need! We've set up our wizard component, now we can create a step component; make a new Livewire component as usual and then add this package's magic: ``` use Livewire\Component; use LivewireWizardForm\Wizard\IsStep; use LivewireWizardForm\Wizard\Contracts\StepComponent; class UserProfileStep extends Component implements StepComponent { use IsStep; [StepStateProperty] public array $data = [ 'username' => '', 'email' => '', 'first_name' => '', 'last_name' => '', ]; public function render() { return view('livewire.user-profile-step'); } } ``` A step must have a state property which will collect its data, and the eligible property can be marked in different ways: 1. By using the `StepStateProperty` attribute on a property; 2. By defining a method named `stepProperty()`; 3. By defining a property named `$stateProperty`. You can adopt your favourite solution! You can even choose to use [Forms](https://livewire.laravel.com/docs/forms): ``` use Livewire\Component; use LivewireWizardForm\Wizard\IsStep; use App\Livewire\Forms\UserProfileForm; use LivewireWizardForm\Wizard\Contracts\StepComponent; class UserProfileStep extends Component implements StepComponent { use IsStep; [StepStateProperty] public UserProfileForm $form; public function render() { return view('livewire.user-profile-step'); } } ``` Doing that, we can achieve a cleaner code while having all the validation logic in a dedicated file, but right now, no validation will be executed when proceeding to the next step. To enable validation before proceeding, we can use one of the following solutions: 1. By using the `ValidatedStep` attribute on the component class; 2. By implementing the `ValidatesStep` interface; Doing this, the package will validate the step and store the validated data in the wizard state. ### Navigating through the steps [](#navigating-through-the-steps) The package relies on Livewire [Events](https://livewire.laravel.com/docs/events) to move from a step to another, the dispatched events are the following: - `previous-step` - `next-step` The step component offers two methods to easily perform all the navigation logic: ``` public function previousStep(bool $quietly = false): void; public function nextStep(bool $quietly = false): void; ``` Every time they are called, they store the step state in the wizard state to let the user continue where they left, but this mechanic can be skipped by setting the `$quitely` argument to `true`. ### Submitting the wizard [](#submitting-the-wizard) To submit the wizard, we can rely on another event, `submit-wizard`. This can be dispatched by calling one of the following methods: ``` // Submits the wizard public function submitWizard(): void; // Submits the wizard if no other steps are defined, otherwise goes to the next one public function proceedWithWizard(bool $quietly = false): bool; ``` FAQs ---- [](#faqs) ### Can I add properties or methods to my components? [](#can-i-add-properties-or-methods-to-my-components) Absolutely! That's the meaning of this whole package! Fill free to make your components the way you prefer, even overriding every method provided by this project's traits! ### Is there a way to easily manage a step icon or a label? [](#is-there-a-way-to-easily-manage-a-step-icon-or-a-label) Yes! You can use the [Teleport](https://livewire.laravel.com/docs/teleport) feature from Livewire (or the directive from [Alpine.js](https://alpinejs.dev/directives/teleport))! You could do like this: ``` {{ __('Create a new user') }} ``` This is just an example, but you can do any magic you prefer to keep your UI aligned with the current step! Testing ------- [](#testing) Right now the package has majorly been tested by being used in a project, but every contribution, especially in matter of tests, is extremely welcomed! ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Gennaro Landolfi](https://github.com/rinodrummer) - [All Contributors](../../contributors) This package is heavily inspired by [spatie/laravel-livewire-wizard](https://spatie.be/docs/laravel-livewire-wizard), and has been developed using [spatie/package-skeleton-laravel](https://github.com/spatie/package-skeleton-laravel). Thanks [Spatie](https://spatie.be) to their incredible contribution to the [PHP](https://php.net)and [Laravel](https://laravel.com) ecosystems! A huge thanks goes to **Taylor Otwell** for [Laravel](https://laravel.com) and **Caleb Porzio** for [Livewire](https://livewire.laravel.com). License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 35 — LowBetter than 79% of packages Maintenance77 Regular maintenance activity Popularity8 Limited adoption so far Community10 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 77.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~13 days Total 2 Last Release 382d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/68b751a42f9319295456b065ee76f807cb9e5558f0cadc76f43fb113579c4117?d=identicon)[rinodrummer](/maintainers/rinodrummer) --- Top Contributors [![rinodrummer](https://avatars.githubusercontent.com/u/6603220?v=4)](https://github.com/rinodrummer "rinodrummer (31 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (6 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (3 commits)") --- Tags laravellivewirewizardstepGennaro Landolfirinodrummerlivewire-wizard-form ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/rinodrummer-livewire-wizard-form/health.svg) ``` [![Health](https://phpackages.com/badges/rinodrummer-livewire-wizard-form/health.svg)](https://phpackages.com/packages/rinodrummer-livewire-wizard-form) ``` ### Alternatives [leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4861.2M8](/packages/leandrocfe-filament-apex-charts)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[spatie/livewire-filepond Upload files using Filepond in Livewire components 306452.7k3](/packages/spatie-livewire-filepond)[ralphjsmit/livewire-urls Get the previous and current url in Livewire. 82270.3k4](/packages/ralphjsmit-livewire-urls)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1124.1k](/packages/codebar-ag-laravel-filament-json-field)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)