Components
Stepper
Guides users through a multi-step flow — horizontal or vertical, with completed-step checks.
php artisan blatui:add stepper
{{-- Numbered steps with Previous / Next controls. Completed steps show a check. --}}
<x-ui.stepper :value="1" class="w-full max-w-xl">
<x-ui.stepper-nav>
<x-ui.stepper-item :step="1">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
</x-ui.stepper-trigger>
<x-ui.stepper-separator />
</x-ui.stepper-item>
<x-ui.stepper-item :step="2">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
</x-ui.stepper-trigger>
<x-ui.stepper-separator />
</x-ui.stepper-item>
<x-ui.stepper-item :step="3">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
</x-ui.stepper-trigger>
</x-ui.stepper-item>
</x-ui.stepper-nav>
<div class="text-muted-foreground flex h-32 items-center justify-center rounded-md border text-sm">
<span x-text="`Step ${step} of 3`"></span>
</div>
<div class="flex justify-between">
<x-ui.button variant="outline" x-bind:disabled="step === 1" x-on:click="step = Math.max(1, step - 1)">Previous</x-ui.button>
<x-ui.button x-bind:disabled="step === 3" x-on:click="step = Math.min(3, step + 1)">Next</x-ui.button>
</div>
</x-ui.stepper>Vertical
{{-- Vertical orientation: indicators stacked with a growing rail between them. --}}
<x-ui.stepper :value="2" orientation="vertical" class="w-full max-w-md">
<x-ui.stepper-nav>
<x-ui.stepper-item :step="1">
<x-ui.stepper-trigger class="items-start">
<span class="flex flex-col items-center self-stretch">
<x-ui.stepper-indicator />
<x-ui.stepper-separator />
</span>
<span class="flex flex-col gap-0.5 pt-1.5 pb-6">
<x-ui.stepper-title>Account</x-ui.stepper-title>
<x-ui.stepper-description>Create your account</x-ui.stepper-description>
</span>
</x-ui.stepper-trigger>
</x-ui.stepper-item>
<x-ui.stepper-item :step="2">
<x-ui.stepper-trigger class="items-start">
<span class="flex flex-col items-center self-stretch">
<x-ui.stepper-indicator />
<x-ui.stepper-separator />
</span>
<span class="flex flex-col gap-0.5 pt-1.5 pb-6">
<x-ui.stepper-title>Profile</x-ui.stepper-title>
<x-ui.stepper-description>Set up your profile</x-ui.stepper-description>
</span>
</x-ui.stepper-trigger>
</x-ui.stepper-item>
<x-ui.stepper-item :step="3">
<x-ui.stepper-trigger class="items-start">
<span class="flex flex-col items-center self-stretch">
<x-ui.stepper-indicator />
</span>
<span class="flex flex-col gap-0.5 pt-1.5">
<x-ui.stepper-title>Complete</x-ui.stepper-title>
<x-ui.stepper-description>Finish the setup</x-ui.stepper-description>
</span>
</x-ui.stepper-trigger>
</x-ui.stepper-item>
</x-ui.stepper-nav>
</x-ui.stepper>With Description
{{-- Title plus a secondary description per step. --}}
<x-ui.stepper :value="2" class="w-full max-w-3xl">
<x-ui.stepper-nav>
<x-ui.stepper-item :step="1">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
<span class="flex flex-col gap-0.5">
<x-ui.stepper-title>Account</x-ui.stepper-title>
<x-ui.stepper-description>Create an account</x-ui.stepper-description>
</span>
</x-ui.stepper-trigger>
<x-ui.stepper-separator />
</x-ui.stepper-item>
<x-ui.stepper-item :step="2">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
<span class="flex flex-col gap-0.5">
<x-ui.stepper-title>Profile</x-ui.stepper-title>
<x-ui.stepper-description>Set up your profile</x-ui.stepper-description>
</span>
</x-ui.stepper-trigger>
<x-ui.stepper-separator />
</x-ui.stepper-item>
<x-ui.stepper-item :step="3">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
<span class="flex flex-col gap-0.5">
<x-ui.stepper-title>Complete</x-ui.stepper-title>
<x-ui.stepper-description>Finish the setup</x-ui.stepper-description>
</span>
</x-ui.stepper-trigger>
</x-ui.stepper-item>
</x-ui.stepper-nav>
</x-ui.stepper>With Labels
{{-- Each indicator paired with a short label. --}}
<x-ui.stepper :value="2" class="w-full max-w-2xl">
<x-ui.stepper-nav>
<x-ui.stepper-item :step="1">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
<x-ui.stepper-title>Details</x-ui.stepper-title>
</x-ui.stepper-trigger>
<x-ui.stepper-separator />
</x-ui.stepper-item>
<x-ui.stepper-item :step="2">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
<x-ui.stepper-title>Confirm</x-ui.stepper-title>
</x-ui.stepper-trigger>
<x-ui.stepper-separator />
</x-ui.stepper-item>
<x-ui.stepper-item :step="3">
<x-ui.stepper-trigger>
<x-ui.stepper-indicator />
<x-ui.stepper-title>Done</x-ui.stepper-title>
</x-ui.stepper-trigger>
</x-ui.stepper-item>
</x-ui.stepper-nav>
</x-ui.stepper>API Reference
Props, slots and exposed methods for
<x-ui.stepper>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value |
int
|
1
|
The active step (1-based). Exposed on the Alpine scope as `step`, so slot markup can read and update it (e.g. Previous / Next buttons) to drive navigation. |
orientation |
string
|
'horizontal'
|
Whether steps lay out in a row or a column. Read by child items to switch their layout and the separator direction.
horizontal
vertical
|
Slots
| Slot | Description |
|---|---|
default |
The stepper body. Compose with <x-ui.stepper-nav> wrapping <x-ui.stepper-item> entries (each holding <x-ui.stepper-trigger>, <x-ui.stepper-indicator>, optional <x-ui.stepper-title>/<x-ui.stepper-description>/<x-ui.stepper-separator>) plus any step content and controls. Everything shares the stepper scope, so controls can read/write `step` directly. |