Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Stepper

A multi-step progress indicator. Uses Alpine.js to track the current step via current or value.

Usage
1
Account
Create your account
2
Profile
Add your details
3
Review
Confirm and submit
example.blade.php 
<x-slate::stepper :current="2">
    <x-slate::stepper-item :step="1" title="Account" description="Create your account" />
    <x-slate::stepper-item :step="2" title="Profile" description="Add your details" />
    <x-slate::stepper-item :step="3" title="Review" description="Confirm and submit" />
</x-slate::stepper>

First step
1
Details
Project basics
2
Members
Invite your team
3
Launch
Go live
example.blade.php 
<x-slate::stepper :current="1">
    <x-slate::stepper-item :step="1" title="Details" description="Project basics" />
    <x-slate::stepper-item :step="2" title="Members" description="Invite your team" />
    <x-slate::stepper-item :step="3" title="Launch" description="Go live" />
</x-slate::stepper>

Completed flow
1
Cart
2
Shipping
3
Payment
example.blade.php 
<x-slate::stepper :current="3">
    <x-slate::stepper-item :step="1" title="Cart" />
    <x-slate::stepper-item :step="2" title="Shipping" />
    <x-slate::stepper-item :step="3" title="Payment" />
</x-slate::stepper>

Composition
code 
Stepper
└── StepperItem
    ├── StepperTitle
    └── StepperDescription

Progressive title / description props on stepper-item compose the title and description parts for you.

Last updated .