Wizard

Multi-step wizard component for guiding users through complex processes

Live Demo

Try the interactive wizard below. Navigate through the steps, fill in the form, and see the complete step with restart functionality.

Create Your Account

Enter your basic information to get started.

Choose Your Plan

Select the plan that best fits your needs.

Starter

$9/mo

Perfect for individuals

Pro

$29/mo

For growing teams

Enterprise

$99/mo

For large organizations

Review & Confirm

Please review your information before completing.

Name:

Not provided

Email:

Not provided

Plan:

starter

I agree to the terms and conditions

You're All Set!

Your account has been created successfully. Welcome aboard, friend!

Overview

The wizard component helps break down complex forms or processes into manageable steps. It provides step navigation, progress indication, and form validation across multiple steps.

The wizard requires a Livewire component to manage step state. It consists of several sub-components:

wizard - Main container
wizard.steps - Step indicators
wizard.step - Individual step content
wizard.navigation - Navigation buttons

Livewire Component Setup

Create a Livewire component that manages the wizard state. The component must have a $step property and navigation methods:

<?php

namespace App\View\Components;

use Livewire\Component;

class MyWizard extends Component
{
    public int $step = 1;
    
    public function next()
    {
        $this->step++;
    }
    
    public function previous()
    {
        $this->step--;
    }
    
    public function complete()
    {
        // Handle form submission
        // Move to complete step (step > totalSteps)
        $this->step++;
    }
    
    public function restart()
    {
        // Reset to first step
        $this->step = 1;
    }
    
    public function render()
    {
        return view('components.my-wizard');
    }
}

Basic Usage

A simple wizard with horizontal steps:

<neura::wizard>
    <neura::wizard.steps 
        :steps="['Step 1', 'Step 2', 'Step 3', 'Complete']" 
        variant="default"
        color="neutral"
        :currentStep="$step"
    />
    
    <neura::wizard.step :step="1" :currentStep="$step">
        <!-- Step 1 content -->
    </neura::wizard.step>
    
    <neura::wizard.step :step="2" :currentStep="$step">
        <!-- Step 2 content -->
    </neura::wizard.step>
    
    <neura::wizard.step :step="3" :currentStep="$step">
        <!-- Step 3 content -->
    </neura::wizard.step>
    
    <neura::wizard.step :step="4" :currentStep="$step">
        <!-- Complete step content -->
    </neura::wizard.step>
    
    <neura::wizard.navigation 
        :totalSteps="3"
        :showCompleteButton="true"
        completeLabel="Start Over"
    />
</neura::wizard>

Complete Step Options

After completing all steps, you can show a completion step with various options:

Restart Button (Default)

When no completeUrl is provided, the button calls wire:click="restart":

<neura::wizard.navigation 
    :totalSteps="3"
    :showCompleteButton="true"
    completeLabel="Start Over"
/>

Redirect Button

Provide a completeUrl to redirect users:

<neura::wizard.navigation 
    :totalSteps="3"
    :showCompleteButton="true"
    completeLabel="Go to Dashboard"
    completeUrl="/dashboard"
/>

Hide Complete Button

Set :showCompleteButton="false" to hide the button on the complete step:

<neura::wizard.navigation 
    :totalSteps="3"
    :showCompleteButton="false"
/>

Step Variants

The wizard supports three different step indicator styles. Click on the steps to navigate and see how each variant behaves:

Default Variant

Default variant displays steps as numbered circles with connecting lines. Features clean shadcn/ui styling with subtle transitions, color-coded states, and status labels. Perfect for multi-step forms and processes.

Current step: 2 of 4

<neura::wizard.steps 
    :steps="['Account', 'Settings', 'Review', 'Complete']" 
    variant="default"
    color="neutral"
    :currentStep="$step"
/>

Tabs Variant

Tabs variant displays steps as tab-like buttons with a bottom border indicator. Clean shadcn/ui styling with smooth transitions. Perfect for horizontal layouts and navigation-heavy interfaces.

Current step: 1 of 4

<neura::wizard.steps 
    :steps="['Account', 'Settings', 'Review', 'Complete']" 
    variant="tabs"
    color="primary"
    :currentStep="$step"
/>

Pills Variant

Pills variant displays steps as segmented control buttons within a container. Modern shadcn/ui styling with smooth transitions and subtle shadows. Great for compact interfaces and toggle-like navigation.

Current step: 3 of 4

<neura::wizard.steps 
    :steps="['Account', 'Settings', 'Review', 'Complete']" 
    variant="pills"
    color="neutral"
    :currentStep="$step"
/>

Step Colors

By default, steps use color="neutral". You can change the style with color, using the same palette as badges and buttons:

neutral (default)

primary

success

danger

<neura::wizard.steps 
    :steps="['One', 'Two', 'Three']" 
    variant="default"
    color="primary"
    :currentStep="$step"
/>

<!-- Same colors as badge/button: neutral, primary, secondary, success, danger, warning, info, blue, green, red, ... -->

Tip:

Click on any step indicator to navigate directly to that step (if it's accessible). You can also use the Previous/Next buttons. All variants now use the shadcn/ui design system for a modern, consistent look.

Navigation Options

Customize navigation buttons and labels:

<neura::wizard.navigation 
    :totalSteps="4"
    :showPrevious="true"
    :showNext="true"
    previousLabel="Back"
    nextLabel="Continue"
    finishLabel="Complete"
    :showCancel="true"
    cancelUrl="/dashboard"
    cancelLabel="Cancel"
    :showCompleteButton="true"
    completeLabel="Done"
    completeUrl="/success"
/>

Best Practices

Do

Break complex processes into 3-5 manageable steps
Provide clear step labels that describe what the user will do
Show progress indicators so users know where they are
Validate each step before allowing progression
Allow users to go back to previous steps
Save progress as users complete steps
Show a clear completion step with next actions

Don't

Create too many steps (max 5-7 recommended)
Require users to complete steps in strict order without reason
Lose user input when navigating between steps
Use wizards for simple single-step forms
Leave users without clear next actions on complete step

Properties

Component	Property	Type	Default	Description
wizard	orientation	string	'horizontal'	Wizard layout: 'horizontal' or 'vertical'
wizard	steps	array	[]	Array of step labels
wizard.steps	variant	string	'tabs'	Style: 'tabs', 'pills', or 'default'
	steps	array	[]	Array of step labels
	color	string	'neutral'	Step indicator color. Same as badge/button: neutral, primary, secondary, success, danger, warning, info, blue, green, red, etc.
	orientation	string	'horizontal'	Layout direction
	currentStep	int	1	Current step number
	stepProperty	string	'step'	Livewire property name for step navigation
wizard.step	step	int	required	Step number for this content
wizard.step	currentStep	int	1	Current active step
wizard.navigation	totalSteps	int	4	Total number of form steps (excluding complete step)
	showPrevious	bool	true	Show previous button
	showNext	bool	true	Show next button
	previousLabel	string	'Back'	Previous button label
	nextLabel	string	'Next'	Next button label
	finishLabel	string	'Finish'	Finish button label (last step)
	showCancel	bool	false	Show cancel button
	cancelUrl	string\|null	null	Cancel redirect URL
	cancelLabel	string	'Cancel'	Cancel button label
	showCompleteButton	bool	true	Show button on complete step
	completeLabel	string\|null	'Done' or 'Start Over'	Complete button label
	completeUrl	string\|null	null	Redirect URL (if null, calls restart)