Steps

The container for horizontal steps.

Property	Type	Description
id	?string	A unique identifier.
step-class	?string	The class to apply to the step. [default="step-neutral"]
stepper-class	?string	The class to apply to the stepper container.

Step

A step element to be used as a child of the Steps component.

Property	Type	Description
step	int	The numbered value of the step. [required]
id	?string	A unique identifier.
label	?string	The label below the step.
icon	?string	If provided, the icon will be shown in the step.
data-content	?string	If provided, the string will be shown in the step.
step-class	?string	The class to apply to the step.
slot	slot	The content of the step if it is current. Default class applies.

For vertical steps check out the Timeline component.

General

The content of the register step.

The content of the payment step.

The content of the prodct shipped step.

<c-steps wire:model="step" class="border-y border-base-content/10 my-5 py-5">
    <c-step step="1" label="Register">
        The content of the register step.
    </c-step>
    <c-step step="2" label="Payment">
        The content of the payment step.
    </c-step>
    <c-step step="3" label="Product shipped" class="bg-warning/15 rounded-field">
        The content of the prodct shipped step.
    </c-step>
</c-steps>

{{-- You could use wire:click instead --}}
<c-button label="Previous" x-on:click="if ($wire.step > 1) $wire.step--" icon="chevron-left" />
<c-button label="Next" x-on:click="if ($wire.step < 3) $wire.step++" icon-right="chevron-right" />

Appearance

<c-steps wire:model="step" step-class="step-primary">
    {{-- Number content --}}
    <c-step step="1" label="A" />
    {{-- Icon content --}}
    <c-step step="2" label="B" icon="user" />
    {{-- String content --}}
    <c-step step="3" label="C" data-content="✓" />
</c-steps>

<c-steps wire:model="step" stepper-class="w-full p-4 bg-base-200 rounded-field" step-class="step-accent">
    <c-step step="1" label="A" />
    <c-step step="2" label="B" />
    <c-step step="3" label="C" />
</c-steps>

<c-steps wire:model="step">
    <c-step step="1" />
    <c-step step="2" />
    <c-step step="3" />
</c-steps>

<c-divider />

<div>
    <c-button label="Previous" x-on:click="if ($wire.step > 1) $wire.step--" icon="chevron-left" />
    <c-button label="Next" x-on:click="if ($wire.step < 3) $wire.step++" icon-right="chevron-right" />
</div>