new
The real time chat demo: Ping →

Steps

Example

This components uses ul and li html tags. Make sure you have an extra rule to not override them on your custom CSS.

// step model
public int $step = 2;
Register step
Payment step
Receive Product
<x-steps wire:model="step" class="border my-5 p-5">
<x-step step="1" text="Register">
Register step
</x-step>
<x-step step="2" text="Payment">
Payment step
</x-step>
<x-step step="3" text="Receive Product" class="bg-orange-500/20">
Receive Product
</x-step>
</x-steps>
 
{{-- Create some methods to increase/decrease the model to match the step number --}}
{{-- You could use Alpine with `$wire` here --}}
<x-button label="Previous" wire:click="prev" />
<x-button label="Next" wire:click="next" />

Style

Remember if you are using deeper CSS classes than steps-xxxx provided by daisyUI you must configure Tailwind safelist.


<x-steps wire:model="example" steps-color="step-warning">
<x-step step="1" text="A" />
<x-step step="2" text="B" />
<x-step step="3" text="C" data-content="" step-classes="!step-success" />
</x-steps>
 
<hr class="my-5" />
 
<x-button label="Previous" wire:click="prev2" />
<x-button label="Next" wire:click="next2" />

maryUI
Sponsor