Stepper

Guide users through multi-step processes.

Examples

Basic Stepper

Initial Step

This step uses the next prop for automatic navigation.

Verification

This step uses both prev and next.

Custom Actions

This step uses a custom actions slot for total control.

blade

<div class="w-full">
    <x-plume::form 
        formData="{ 'currentStep': 1 }">
        <x-plume::stepper model="currentStep">
            <x-plume::stepper.step step="1" title="Initial Step" next="Continue">
                <p class="text-foreground/60 dark:text-background-400">This step
                    uses the <code class="text-xs">next</code> prop for automatic
                    navigation.</p>
            </x-plume::stepper.step>

            ...

            <x-plume::stepper.step step="3" title="Custom Actions">
                <p class="text-foreground/60 dark:text-background-400 mb-4">This
                    step uses a custom <code class="text-xs">actions</code> slot for
                    total control.</p>
                <x-slot:actions>
                    <x-plume::stepper.actions prev="Go Back">
                        <x-plume::button @click="data.currentStep = 1" style="ghost"
                            size="sm">Reset to
                            Start</x-plume::button>
                        <x-plume::button @click="alert('Finished!')"
                            size="sm">Finish</x-plume::button>
                    </x-plume::stepper.actions>
                </x-slot:actions>
            </x-plume::stepper.step>
        </x-plume::stepper>
    </x-plume::form>
</div>

Prop	Type	Default	Description
active	int	1	The initially active step number.
model	string	null	AlpineJS model name for the active step.
onStepChange	string	null	AlpineJS expression or function to call when the active step changes.
onFinish	string	null	AlpineJS expression or function to call when the final step is completed.

Usage

blade

<x-plume::stepper active="1">
    <x-plume::stepper.step step="1" title="First" next />
    <x-plume::stepper.step step="2" title="Second" prev />
</x-plume::stepper>