Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add stepper

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::stepper> shows where the user is in a sequence — checkout, onboarding, a wizard — and how much is left. Each step is a <x-aura::stepper.step>; the parent decides which one is active and styles the rest accordingly.

Basic Usage

Account
Billing
Confirm 
<x-aura::stepper :active="2">
    <x-aura::stepper.step label="Account" />
    <x-aura::stepper.step label="Billing" />
    <x-aura::stepper.step label="Confirm" />
</x-aura::stepper>
<x-aura::stepper :active="2">
    <x-aura::stepper.step label="Account" />
    <x-aura::stepper.step label="Billing" />
    <x-aura::stepper.step label="Confirm" />
</x-aura::stepper>

Props

Prop Type Default Description
active int 1 The current step, counting from 1.
orientation string 'horizontal' horizontal or vertical.
size string 'md' sm, md, lg.
connectors bool true Draw the lines between the steps.

Step

Prop Type Default Description
label string '' The step name.
description string|null null A short line under the label.
icon string|null null Icon shown instead of the step number.

Vertical

A vertical stepper suits a narrow column or a long flow where each step needs a description.

Account Your details
Billing How you'll pay
Confirm Check and place the order 
<x-aura::stepper :active="2" orientation="vertical">
    <x-aura::stepper.step label="Account" description="Your details" />
    <x-aura::stepper.step label="Billing" description="How you'll pay" />
    <x-aura::stepper.step label="Confirm" description="Check and place the order" />
</x-aura::stepper>

With Livewire

<x-aura::stepper :active="$step">
    <x-aura::stepper.step label="Account" />
    <x-aura::stepper.step label="Billing" />
</x-aura::stepper>

Notes

The stepper reports progress; it does not navigate. Wire your own controls to move between steps, and keep active as the single source of truth for where the user is.