Basic Form Wizard

Step 1 of 3 33% Complete

Personal Information

Enter your personal details

Steps Configuration

$steps = [
    [
        'title' => 'Personal Information',
        'description' => 'Enter your personal details',
        'rules' => [
            'name' => 'required|string|max:255',
            'email' => 'required|email',
        ],
        'messages' => [
            'name.required' => 'Name is required',
        ],
    ],
    [
        'title' => 'Address',
        'rules' => [
            'address' => 'required|string',
        ],
    ],
];

Event Handling

@script
<script>
    Livewire.on('form-wizard-submitted', () => {
        // Handle form submission
        console.log('Form submitted!');
    });
</script>
@endscript

Form Wizard Component

Multi-step form wizard component built with Livewire for complex form workflows.

Basic Usage

The Form Wizard component is a Livewire component that helps you create multi-step forms with validation, progress tracking, and step navigation.

<livewire:admin.form-wizard :steps="$steps">
    
</livewire:admin.form-wizard>

Steps Configuration

Each step in the wizard is configured with:

  • title - Step title displayed in navigation
  • description - Optional step description
  • rules - Laravel validation rules for the step
  • messages - Custom validation error messages
  • icon - Optional FontAwesome icon name
$steps = [
    [
        'title' => 'Step 1',
        'description' => 'Step description',
        'rules' => [
            'field' => 'required|string',
        ],
        'messages' => [
            'field.required' => 'Field is required',
        ],
    ],
];

Component Properties

The FormWizard Livewire component exposes these properties:

  • $currentStep - Current active step (1-based)
  • $totalSteps - Total number of steps
  • $steps - Array of step configurations
  • $errors - Validation errors array

Available Methods

  • next() - Move to next step (validates current step first)
  • previous() - Move to previous step
  • goToStep($step) - Jump to specific step
  • submit() - Submit the form (validates all steps)
  • getProgressPercentage() - Get completion percentage
  • isStepCompleted($step) - Check if step is completed
  • isStepAccessible($step) - Check if step can be accessed

Events

The component dispatches the following events:

  • form-wizard-submitted - Dispatched when all steps are validated and form is submitted
Livewire.on('form-wizard-submitted', () => {
    // Handle form submission
});

Features

  • Multi-step navigation - Navigate between steps with validation
  • Progress tracking - Visual progress bar and percentage
  • Step validation - Each step validates before proceeding
  • Step completion tracking - Visual indicators for completed steps
  • Accessible navigation - Only allow navigation to completed or next step
  • Error display - Shows validation errors for current step
  • Responsive design - Works on all screen sizes
  • Theme integration - Uses CSS variables for accent colors

Complete Example

// In your Livewire component
public array $steps = [];

public function mount(): void
{
    $this->steps = [
        [
            'title' => 'Personal Info',
            'rules' => ['name' => 'required'],
        ],
        [
            'title' => 'Address',
            'rules' => ['address' => 'required'],
        ],
    ];
}
<livewire:admin.form-wizard :steps="$steps">
    
    
</livewire:admin.form-wizard>