Steps

Steps Component

The Steps component provides a horizontal stepper interface to visually represent progress through a sequence of steps. It supports marking steps as completed, current, or upcoming, with optional labels, tooltips, and customizable completion icons.

Example Usage

<x-steps>
    <x-steps.step tooltip="Step 1 completed" completed number="1" label="Completed" />
    <x-steps.step tooltip="Current step" :current="$currentStep == 'step2'" number="2" label="In Progress" />
    <x-steps.step tooltip="Step 3 upcoming" number="3" label="Pending" />
</x-steps>

Props

Steps (Parent)

• No specific props, accepts standard HTML attributes applied to the <ol> container.

Steps.Step

• completed (bool, default: false)
  Marks the step as completed, showing a check icon or custom icon.

• current (bool, default: false)
  Marks the step as the current active step with distinct styling.

• number (int|null)
  The step number displayed inside the step circle (ignored if completed).

• label (string|null)
  Optional text label displayed next to the step number or icon.

• tooltip (string|null)
  Optional tooltip text shown on hover for additional context.

• completeIcon (string, default: "icon-check")
  CSS class for the icon displayed when the step is completed.

• start (bool, default: false)
  Reserved for potential use, currently no visual effect.

Overview

The Steps component renders a flexible horizontal stepper UI with accessibility and responsive design in mind. Each step visually indicates its status: completed steps show a check icon, the current step is highlighted, and future steps appear neutral. Labels and tooltips enhance clarity, while Tailwind CSS provides styling and dark mode support.