Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Steps component displays a visual progress indicator for multi-step processes such as checkout flows, onboarding wizards, or registration forms. Each step shows its title, optional description, and current status (pending, current, completed). Steps are connected by visual lines that reflect progress.

Basic Usage

Account
2
Profile
3
Review 
<x-aura::steps>
    <x-aura::steps.step title="Account" status="completed" />
    <x-aura::steps.step title="Profile" status="current" />
    <x-aura::steps.step title="Review" status="pending" />
</x-aura::steps>

Props

Steps

Prop Type Default Description
current int 0 Index of the currently active step (used with Alpine.js for dynamic navigation).
variant string 'horizontal' Layout direction: horizontal or vertical.
clickable bool false Allow clicking on steps to navigate.
size string 'md' Size variant: sm, md, lg.

Steps Step

Prop Type Default Description
title string '' Step heading text (alias: label).
description string '' Optional description shown below the title.
step int 0 Zero-based step index (determines number displayed and status via parent's current).
status string|null null Explicit status override: pending, current, or completed. When set, renders server-side without Alpine.
icon string|null null Custom icon name. Defaults to a checkmark for completed and a number for others.

Examples

Checkout Wizard

Cart Review your items
Shipping Delivery address
Payment Payment method
Confirmation Order summary 
<x-aura::steps>
    <x-aura::steps.step
        title="Cart"
        description="Review your items"
        status="completed"
        icon="shopping-cart"
    />
    <x-aura::steps.step
        title="Shipping"
        description="Delivery address"
        status="completed"
        icon="truck"
    />
    <x-aura::steps.step
        title="Payment"
        description="Payment method"
        status="current"
        icon="credit-card"
    />
    <x-aura::steps.step
        title="Confirmation"
        description="Order summary"
        status="pending"
        icon="check-circle"
    />
</x-aura::steps>

Onboarding Flow

Create Account Email and password
2
Company Details Business information
3
Invite Team Add team members
4
Get Started Explore the platform 
<x-aura::steps>
    <x-aura::steps.step
        title="Create Account"
        description="Email and password"
        status="completed"
    />
    <x-aura::steps.step
        title="Company Details"
        description="Business information"
        status="current"
    />
    <x-aura::steps.step
        title="Invite Team"
        description="Add team members"
        status="pending"
    />
    <x-aura::steps.step
        title="Get Started"
        description="Explore the platform"
        status="pending"
    />
</x-aura::steps>

Livewire Multi-Step Form

<!-- Blade view -->
<div>
    <x-aura::steps>
        <x-aura::steps.step
            title="Personal Info"
            :status="$currentStep > 1 ? 'completed' : ($currentStep === 1 ? 'current' : 'pending')"
        />
        <x-aura::steps.step
            title="Address"
            :status="$currentStep > 2 ? 'completed' : ($currentStep === 2 ? 'current' : 'pending')"
        />
        <x-aura::steps.step
            title="Preferences"
            :status="$currentStep > 3 ? 'completed' : ($currentStep === 3 ? 'current' : 'pending')"
        />
        <x-aura::steps.step
            title="Confirm"
            :status="$currentStep === 4 ? 'current' : 'pending'"
        />
    </x-aura::steps>

    <div class="mt-8">
        @if($currentStep === 1)
            {{-- Step 1 form fields --}}
            <x-aura::input label="Full Name" name="name" wire:model="name" />
            <x-aura::input label="Email" name="email" type="email" wire:model="email" />
        @elseif($currentStep === 2)
            {{-- Step 2 form fields --}}
            <x-aura::input label="Street" name="street" wire:model="street" />
            <x-aura::input label="City" name="city" wire:model="city" />
        @elseif($currentStep === 3)
            {{-- Step 3 form fields --}}
            <x-aura::select label="Language" name="language" :options="$languages" wire:model="language" />
        @else
            {{-- Step 4: review --}}
            <p>Review your information before submitting.</p>
        @endif
    </div>

    <div class="mt-6 flex justify-between">
        @if($currentStep > 1)
            <x-aura::button variant="ghost" wire:click="previousStep">Back</x-aura::button>
        @else
            <div></div>
        @endif

        @if($currentStep < 4)
            <x-aura::button wire:click="nextStep">Continue</x-aura::button>
        @else
            <x-aura::button wire:click="submit">Submit</x-aura::button>
        @endif
    </div>
</div>

// Livewire component
class RegistrationWizard extends Component
{
    public int $currentStep = 1;
    public string $name = '';
    public string $email = '';
    public string $street = '';
    public string $city = '';
    public string $language = '';

    public function nextStep(): void
    {
        $this->validateCurrentStep();
        $this->currentStep = min($this->currentStep + 1, 4);
    }

    public function previousStep(): void
    {
        $this->currentStep = max($this->currentStep - 1, 1);
    }

    public function submit(): void
    {
        // Save registration data
        $this->dispatch('toast', type: 'success', message: 'Registration complete!');
    }

    private function validateCurrentStep(): void
    {
        match ($this->currentStep) {
            1 => $this->validate(['name' => 'required', 'email' => 'required|email']),
            2 => $this->validate(['street' => 'required', 'city' => 'required']),
            3 => $this->validate(['language' => 'required']),
            default => null,
        };
    }
}

Minimal Without Descriptions

Upload
2
Process
3
Done 
<x-aura::steps>
    <x-aura::steps.step title="Upload" status="completed" />
    <x-aura::steps.step title="Process" status="current" />
    <x-aura::steps.step title="Done" status="pending" />
</x-aura::steps>

Slots

Slot Component Description
default steps Contains steps.step children.
default steps.step Not typically used; title and description come from props.

Accessibility

  • The steps container uses role="navigation" with aria-label="Progress".
  • Each step uses aria-current="step" when its status is current.
  • Completed steps are indicated with aria-label including "completed" status.
  • The connecting lines between steps are decorative and hidden from screen readers with aria-hidden="true".
  • Step numbers or icons include meaningful alt/aria-label text.
  • The component is purely visual and does not handle navigation; keyboard navigation is managed by the surrounding form or wizard controls.