Logo
Neura UI
Loading…
Logo
All pages 86

Wizard

Multi-step wizard for guiding users through complex processes

Basic Usage

A wizard is composed of a container, step indicators, step panels, and navigation. The current step is bound to a Livewire property by default ($step ).
blade
Account
Plan
Confirm
Done

Create your account

Enter your name and email to get started.

Choose a plan

Pick the plan that fits your needs.

Confirm

Review your choices before finishing.

You're all set

Your account is ready to use.
Step of 3 
<neura::wizard id="signup" :steps="['Account', 'Plan', 'Confirm', 'Done']" :totalSteps="3">
    <neura::wizard.steps variant="default" />

    <neura::wizard.step :step="1">...</neura::wizard.step>
    <neura::wizard.step :step="2">...</neura::wizard.step>
    <neura::wizard.step :step="3">...</neura::wizard.step>
    <neura::wizard.step :step="4">...</neura::wizard.step>

    <neura::wizard.navigation
        previousLabel="Back"
        nextLabel="Continue"
        finishLabel="Finish"
        completeLabel="Start over"
        :showCounter="true"
    />
</neura::wizard>

Overview

The wizard breaks complex forms into manageable steps. Sub-components:
  • wizard — main container
  • wizard.steps — step indicators
  • wizard.step — panel content
  • wizard.navigation — back / next / finish

Livewire Setup

Expose a $step property and navigation methods on your Livewire component:
PHP 
public int $step = 1;

public function next(): void
{
    $this->step++;
}

public function previous(): void
{
    $this->step--;
}

public function complete(): void
{
    $this->step++; // move past totalSteps to show the complete panel
}

public function restart(): void
{
    $this->step = 1;
}
For a client-only wizard with no server round-trip, pass :stepProperty="false" .

Step Variants

Three indicator styles: default , tabs , and pills .

Default

blade
Account
Settings
Review
Done
Step 2 of 4 
<neura::wizard.steps
    :steps="['Account', 'Settings', 'Review', 'Done']"
    variant="default"
    color="neutral"
/>

Tabs

blade
Step 1 of 4 
<neura::wizard.steps
    :steps="['Account', 'Settings', 'Review', 'Done']"
    variant="tabs"
    color="primary"
/>

Pills

blade
Step 3 of 4 
<neura::wizard.steps
    :steps="['Account', 'Settings', 'Review', 'Done']"
    variant="pills"
    color="neutral"
/>

Colors

Use the same color palette as badges and buttons via color :
blade
neutral
One
Two
Three
primary
One
Two
Three
success
One
Two
Three 
<neura::wizard.steps color="neutral" ... />
<neura::wizard.steps color="primary" ... />
<neura::wizard.steps color="success" ... />

Vertical Orientation

Set orientation="vertical" to place the indicator in a sidebar. Panels and navigation are laid out automatically.
blade

Setup

Four short steps.

Account Who you are
Workspace Name your team
Invite Add teammates
Done All finished

Account

Tell us who you are.

Workspace

Pick a name for your team.

Invite

Add the people you work with.

All set

Your workspace is ready.
Step of 3 
<neura::wizard
    id="onboarding"
    orientation="vertical"
    stepProperty="verticalStep"
    :steps="[
        ['label' => 'Account', 'description' => 'Who you are'],
        ['label' => 'Workspace', 'description' => 'Name your team'],
        ['label' => 'Invite', 'description' => 'Add teammates'],
        ['label' => 'Done', 'description' => 'All finished'],
    ]"
    :totalSteps="3"
>
    <neura::wizard.steps variant="default" color="primary" heading="Setup" />
    <neura::wizard.step :step="1">...</neura::wizard.step>
    <neura::wizard.navigation nextAction="nextVertical" previousAction="previousVertical" />
</neura::wizard>

Navigation Options

Customize labels, variants, cancel / complete actions, and the step counter:
Blade 
<neura::wizard.navigation
    :totalSteps="4"
    previousLabel="Back"
    nextLabel="Continue"
    finishLabel="Complete"
    :showCancel="true"
    cancelUrl="/dashboard"
    :showCounter="true"
    completeLabel="Done"
    completeUrl="/success"
/>

Best Practices

Do

  • Break processes into 3–5 clear steps
  • Label steps with what the user will do
  • Validate before advancing
  • Allow going back without losing input
  • Show a clear completion state

Don't

  • Create too many steps (keep under 7)
  • Use a wizard for a single simple form
  • Lose user input when navigating
  • Leave the complete step without a next action

Properties

Property Type Default Description
orientation string horizontal horizontal or vertical
steps array [] Step labels or ['label' => …, 'description' => …]
totalSteps int null Form steps before the completion panel
stepProperty string|false step Livewire property to bind; false for Alpine-only
variant string tabs Indicator style on wizard.steps : default, tabs, pills
color string neutral Active / completed step color
linear bool true Only allow jumping to reached steps
showCounter bool false Show “Step X of Y” in navigation
nextAction string next Livewire method for Next
previousAction string previous Livewire method for Back
completeAction string complete Livewire method for Finish
restartAction string restart Livewire method on the complete panel