Wizard
Multi-step wizard component for guiding users through complex processes
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 containerwizard.steps- Step indicatorswizard.step- Individual step contentwizard.navigation- Navigation buttons
Livewire Component Setup
Create a Livewire component that extends the wizard functionality. The component must have a
$step property and navigation methods:
<?php
namespace App\View\Components;
use Livewire\Component;
class MyWizard extends Component
{
public $step = 1;
public function next()
{
$this->step++;
}
public function previous()
{
$this->step--;
}
public function complete()
{
// Handle form submission
$this->reset('step');
}
public function render()
{
return view('components.my-wizard');
}
}Basic Usage
A simple wizard with horizontal steps:
Wizard example with 4 steps. Note: This requires a Livewire component with step management.
<neura::wizard :steps="['Step 1', 'Step 2', 'Step 3', 'Step 4']">
<neura::wizard.steps :steps="['Step 1', 'Step 2', 'Step 3', 'Step 4']" variant="tabs" />
<neura::wizard.step step="1">
<!-- Step 1 content -->
</neura::wizard.step>
<neura::wizard.step step="2">
<!-- Step 2 content -->
</neura::wizard.step>
<neura::wizard.step step="3">
<!-- Step 3 content -->
</neura::wizard.step>
<neura::wizard.step step="4">
<!-- Step 4 content -->
</neura::wizard.step>
<neura::wizard.navigation totalSteps="4" />
</neura::wizard>Step Variants
The wizard supports different step indicator styles:
Tabs Variant (Default)
Tabs variant displays steps as tab-like buttons with a bottom border indicator.
Pills Variant
Pills variant displays steps as pill-shaped buttons within a container.
Default Variant
Default variant displays steps as numbered circles with connecting lines.
Orientation
Wizards can be displayed horizontally or vertically:
Horizontal (Default)
Horizontal orientation displays steps in a single row at the top.
Vertical
Vertical orientation displays steps in a sidebar on the left side with step content on the right.
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"
/>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
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
Properties
| Component | Property | Type | Default | Description |
|---|---|---|---|---|
| wizard | orientation | string | 'horizontal' | Wizard layout: 'horizontal' or 'vertical' |
| steps | array | [] | Array of step labels (optional, passed to steps component) | |
| wizard.steps | variant | string | 'tabs' | Step indicator style: 'tabs', 'pills', or 'default' |
| steps | array | [] | Array of step labels | |
| orientation | string | 'horizontal' | Steps layout: 'horizontal' or 'vertical' | |
| currentStep | int | 1 | Initial step number (usually managed by Livewire) | |
| wizard.step | step | int | required | Step number this content belongs to |
| wizard.navigation | totalSteps | int | 4 | Total number of steps in the wizard |
| showPrevious | bool | true | Show previous/back 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 (shown on last step) | |
| showCancel | bool | false | Show cancel button | |
| cancelUrl | string|null | null | URL to redirect when cancel is clicked | |
| cancelLabel | string | 'Cancel' | Cancel button label |