Setting initial state | laravel-livewire-wizard | Spatie

 SPATIE

  Laravel Livewire Wizard
==========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-livewire-wizard](https://spatie.be/docs/laravel-livewire-wizard/v2)  Usage  Setting initial state

 Version   v2   v1

 Other versions for crawler [v2](https://spatie.be/docs/laravel-livewire-wizard/v2) [v1](https://spatie.be/docs/laravel-livewire-wizard/v1)

  Setting initial state
- [ Introduction ](https://spatie.be/docs/laravel-livewire-wizard/v2/introduction)
- [ Support us ](https://spatie.be/docs/laravel-livewire-wizard/v2/support-us)
- [ Requirements ](https://spatie.be/docs/laravel-livewire-wizard/v2/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-livewire-wizard/v2/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-livewire-wizard/v2/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-livewire-wizard/v2/changelog)
- [ About us ](https://spatie.be/docs/laravel-livewire-wizard/v2/about-us)

Usage
-----

- [ Creating your first wizard ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/creating-your-first-wizard)
- [ Navigating steps ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/navigating-steps)
- [ Rendering navigation ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/rendering-navigation)
- [ Accessing state ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/accessing-state)
- [ Setting initial state ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/setting-initial-state)
- [ Testing wizards ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/testing-wizards)

 Setting initial state
=====================

###  On this page

1. [ Starting at a specific step ](#content-starting-at-a-specific-step)
2. [ Setting initial state ](#content-setting-initial-state)

There are various ways to customize what your wizard should initially display.

Starting at a specific step
-----------------------------------------------------------------------------------------------------------------------------------------

If you want to let your wizard display a specific step when it is first rendered, you can pass the step name to the `show-step` property of the wizard.

```

```

Setting initial state
-----------------------------------------------------------------------------------------------------------------------

To let the steps start with other values than the ones hardcoded in your steps, you can pass initial state via the `initial-state` property. The value given must be an array. The key of each item needs to be the name of a step, the value an array containing the state for that step. Here's an example:

```
@php
$initialState = [
    'delivery-address-step' => [
        // ...
        'zip' => '10000',
        'city' => 'Washington',
    ],
];

@endphp

```

Instead of passing initial state via the `initial-state` property, you could let your `WizardComponent` implement `initialState` and let that function return the initial state.

In this example we'll pass the user id as a prop, and fetch the relevant details in the `initialState` function.

```
{{-- in your blade view --}}

```

```
namespace App\Components;

use Spatie\LivewireWizard\Components\WizardComponent;

class CheckoutWizardComponent extends WizardComponent
{
    public function mount(string $userId)
    {
        $this->userId = $userId;
    }

    public function initialState(): array
    {
        $user = User::findOrFail($this->userId);

        return [
            'delivery-address-step' => [
                'zip' => $user->zip,
                'city' => $user->city,
            ],
        ];
    }
}
```

 A good
match?
-------------

### What we do best

- All things Laravel
- Custom frontend components
- Building APIs
- AI-powered features
- Simplifying things
- Clean solutions
- Integrating services

### Not our cup of tea

- WordPress themes
- Cutting corners
- Free mockups to win a job
- "Just execute the briefing"

 In short: we'd like to be a **substantial part** of your project.

 [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)