Stepper

Stepper component for displaying multi-step processes and progress indicators.

Basic Stepper

Step 1
Step 2
Step 3
Step 4


          <.stepper>
            <:step label="Step 1" status={:completed} />
            <:step label="Step 2" status={:active} />
            <:step label="Step 3" status={:pending} />
            <:step label="Step 4" status={:pending} />
          </.stepper>

Vertical Stepper

Account Setup
Profile Information
Preferences
Review


          <.stepper orientation={:vertical}>
            <:step label="Account Setup" status={:completed} />
            <:step label="Profile Information" status={:completed} />
            <:step label="Preferences" status={:active} />
            <:step label="Review" status={:pending} />
          </.stepper>

With Icons

Cart
Shipping
Payment
Review


          <.stepper>
            <:step label="Cart" status={:completed} icon="hero-shopping-cart" />
            <:step label="Shipping" status={:completed} icon="hero-truck" />
            <:step label="Payment" status={:active} icon="hero-credit-card" />
            <:step label="Review" status={:pending} icon="hero-check-circle" />
          </.stepper>

With Variants

Success
Warning
Error


          <.stepper>
            <:step label="Success" status={:completed} variant={:success} />
            <:step label="Warning" status={:active} variant={:warning} />
            <:step label="Error" status={:pending} variant={:error} />
          </.stepper>

Step Status

Pending (default):

Pending Step

Active:

Active Step

Completed:

Completed Step


          <:step label="Pending Step" status={:pending} />
          <:step label="Active Step" status={:active} />
          <:step label="Completed Step" status={:completed} />

Props

Prop	Type	Default	Description
orientation	:horizontal \| :vertical	:horizontal	Layout orientation of the stepper
class	string	""	Additional CSS classes
Step Slot Props
label	string	nil	Label text for the step
status	:pending \| :active \| :completed	:pending	Status of the step
variant	:primary \| :secondary \| :accent \| :info \| :success \| :warning \| :error	:primary	Color variant for active/completed steps
icon	string	nil	Heroicon name (e.g., "hero-check-circle")