{"id":13405102,"url":"https://github.com/vildanbina/livewire-wizard","last_synced_at":"2025-10-04T08:32:22.450Z","repository":{"id":42431442,"uuid":"463924176","full_name":"vildanbina/livewire-wizard","owner":"vildanbina","description":"Livewire component that provides you with a wizard that supports multiple steps form while maintaining state.","archived":false,"fork":false,"pushed_at":"2024-09-02T12:31:42.000Z","size":36,"stargazers_count":330,"open_issues_count":0,"forks_count":32,"subscribers_count":4,"default_branch":"v2.1","last_synced_at":"2025-03-24T02:26:32.669Z","etag":null,"topics":["forms","laravel","livewire","multistep","wizard"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vildanbina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"vildanbina"}},"created_at":"2022-02-26T17:44:21.000Z","updated_at":"2025-03-15T07:31:32.000Z","dependencies_parsed_at":"2024-06-20T22:01:30.747Z","dependency_job_id":"d98b99d9-b555-45ba-9b45-33f3e0762654","html_url":"https://github.com/vildanbina/livewire-wizard","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":0.4736842105263158,"last_synced_commit":"ae382777690778f4f3754d822dd9b0ef167769b6"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vildanbina%2Flivewire-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vildanbina%2Flivewire-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vildanbina%2Flivewire-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vildanbina%2Flivewire-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vildanbina","download_url":"https://codeload.github.com/vildanbina/livewire-wizard/tar.gz/refs/heads/v2.1","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246413231,"owners_count":20773053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["forms","laravel","livewire","multistep","wizard"],"created_at":"2024-07-30T19:01:55.767Z","updated_at":"2025-10-04T08:32:17.411Z","avatar_url":"https://github.com/vildanbina.png","language":"PHP","funding_links":["https://github.com/sponsors/vildanbina"],"categories":["PHP"],"sub_categories":[],"readme":"[![Latest Stable Version](https://poser.pugx.org/vildanbina/livewire-wizard/v)](https://packagist.org/packages/vildanbina/livewire-wizard)\n[![Total Downloads](https://poser.pugx.org/vildanbina/livewire-wizard/downloads)](https://packagist.org/packages/vildanbina/livewire-wizard)\n[![Latest Unstable Version](https://poser.pugx.org/vildanbina/livewire-wizard/v/unstable)](https://packagist.org/packages/vildanbina/livewire-wizard)\n[![License](https://poser.pugx.org/vildanbina/livewire-wizard/license)](https://packagist.org/packages/vildanbina/livewire-wizard)\n[![PHP Version Require](https://poser.pugx.org/vildanbina/livewire-wizard/require/php)](https://packagist.org/packages/vildanbina/livewire-wizard)\n\nA dynamic Laravel Livewire component for multi steps form.\n\n![Multi steps form](https://user-images.githubusercontent.com/51203303/155848196-e3569891-cb63-499d-8079-a63a30925b77.png)\n\n## Installation\n\nYou can install the package via composer:\n\n``` bash\ncomposer require vildanbina/livewire-wizard\n```\n\nFor UI design this package require [WireUI package](https://livewire-wireui.com) for details.\n\n## Alpine\n\nLivewire Wizard requires [Alpine](https://github.com/alpinejs/alpine). You can use the official CDN to quickly include Alpine:\n\n```html\n\u003c!-- Alpine v2 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js\" defer\u003e\u003c/script\u003e\n\n\u003c!-- Alpine v3 --\u003e\n\u003cscript defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n```\n\n## TailwindCSS\n\nThe base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.\n\n```shell\nphp artisan vendor:publish --tag=livewire-wizard-views\n```\n\n## Usage\n\n### Creating a wizard form\n\nYou can create livewire component `php artisan make:livewire UserWizard` to make the initial Livewire component. Open your component class and make sure it extends the `WizardComponent` class:\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Vildanbina\\LivewireWizard\\WizardComponent;\nuse App\\Models\\User;\n\nclass UserWizard extends WizardComponent\n{\n    // My custom class property\n    public $userId;\n    \n    /*\n     * Will return App\\Models\\User instance or will create empty User (based on $userId parameter) \n     */\n    public function model()\n    {\n        return User::findOrNew($this-\u003euserId);\n    }\n}\n```\n\nWhen you need to display wizard form, based on above example we need to pass `$userId` value and to display wizard form:\n\n```html \n\u003clivewire:user-wizard user-id=\"3\"/\u003e\n```\n\nOr when you want to create new user, let blank `user-id` attribute, or don't put that.\n\nWhen you want to reset form, ex. To reset to the first step, and clear filled fields. You can use:\n\n```php\n$wizardFormInstance-\u003eresetForm();\n```\n\nWhen you want to have current step instance. You can use:\n\n```php\n$wizardFormInstance-\u003egetCurrentStep();\n```\n\nWhen you want to go to specific step. You can use:\n\n```php\n$wizardFormInstance-\u003esetStep($step);\n```\n\nOr, you want to go in the next step:\n\n```php\n$wizardFormInstance-\u003egoToNextStep();\n```\n\nOr, you want to go in the prev step:\n\n```php\n$wizardFormInstance-\u003egoToPrevStep();\n```\n\n### Creating a wizard step\n\nYou can create wizard form step. Open or create your step class (at `App\\Steps` folder) and make sure it extends the `Step` class:\n\n```php\n\u003c?php\n\nnamespace App\\Steps;\n\nuse Vildanbina\\LivewireWizard\\Components\\Step;\nuse Illuminate\\Validation\\Rule;\n\nclass General extends Step\n{\n    // Step view located at resources/views/steps/general.blade.php \n    protected string $view = 'steps.general';\n\n    /*\n     * Initialize step fields\n     */\n    public function mount()\n    {\n        $this-\u003emergeState([\n            'name'                  =\u003e $this-\u003emodel-\u003ename,\n            'email'                 =\u003e $this-\u003emodel-\u003eemail,\n        ]);\n    }\n    \n    /*\n    * Step icon \n    */\n    public function icon(): string\n    {\n        return 'check';\n    }\n\n    /*\n     * When Wizard Form has submitted\n     */\n    public function save($state)\n    {\n        $user = $this-\u003emodel;\n\n        $user-\u003ename     = $state['name'];\n        $user-\u003eemail    = $state['email'];\n        \n        $user-\u003esave();\n    }\n\n    /*\n     * Step Validation\n     */\n    public function validate()\n    {\n        return [\n            [\n                'state.name'     =\u003e ['required', Rule::unique('users', 'name')-\u003eignoreModel($this-\u003emodel)],\n                'state.email'    =\u003e ['required', Rule::unique('users', 'email')-\u003eignoreModel($this-\u003emodel)],\n            ],\n            [],\n            [\n                'state.name'     =\u003e __('Name'),\n                'state.email'    =\u003e __('Email'),\n            ],\n        ];\n    }\n\n    /*\n     * Step Title\n     */\n    public function title(): string\n    {\n        return __('General');\n    }\n}\n```\n\n**Note:** Remember to use the prefix `state.` in the `wire:model` attribute in views, for example: `wire:model=\"state.name\"`\n\n\n\n\n\nIn Step class, you can use livewire hooks example:\n\n```php\nuse Vildanbina\\LivewireWizard\\Components\\Step;\n\nclass General extends Step\n{\n    public function onStepIn($newStep)\n    {\n        // Something you want\n    }\n\n    public function onStepOut($oldStep)\n    {\n        // Something you want\n    }\n\n    public function updating($name, $value)\n    {\n        // Something you want\n    }\n\n    public function updatingState($name, $value)\n    {\n        // Something you want\n    }\n    \n    public function updated($name, $value)\n    {\n        // Something you want\n    }\n\n    public function updatedState($name, $value)\n    {\n        // Something you want\n    }\n}\n```\n\nEach step need to have view, you can pass view path in `$view` property.\n\nAfter create step class, you need to put that step to wizard form:\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse App\\Steps\\General;\nuse Vildanbina\\LivewireWizard\\WizardComponent;\n\nclass UserWizard extends WizardComponent\n{\n    public array $steps = [\n        General::class,\n        // Other steps...\n    ];\n   \n    ...\n}\n```\n\n## Building Tailwind CSS for production\n\nBecause some classes are dynamically build and to compile js you should add some classes to the purge safelist so your `tailwind.config.js` should look something like this:\n\n```js\nmodule.exports = {\n    presets: [\n        require(\"./vendor/wireui/wireui/tailwind.config.js\")\n    ],\n    content: [\n        \"./resources/**/*.blade.php\",\n        \"./resources/**/*.js\",\n        \"./resources/**/*.vue\",\n\n        \"./vendor/vildanbina/livewire-wizard/resources/views/*.blade.php\",\n        \"./vendor/wireui/wireui/resources/**/*.blade.php\",\n        \"./vendor/wireui/wireui/ts/**/*.ts\",\n        \"./vendor/wireui/wireui/src/View/**/*.php\"\n    ],\n    plugins: [\n        require(\"@tailwindcss/forms\"),\n    ],\n};\n\n```\n\nIf you haven't installed `tailwindcss/forms` plugin, install it: `npm install -D @tailwindcss/forms`\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease e-mail vildanbina@gmail.com to report any security vulnerabilities instead of the issue tracker.\n\n## Credits\n\n- [Vildan Bina](https://github.com/vildanbina)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvildanbina%2Flivewire-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvildanbina%2Flivewire-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvildanbina%2Flivewire-wizard/lists"}