README

Stepper

Accessible horizontal and vertical progress indicators and multi-step wizards for Laravel Blade applications.

Installation

composer require bladewindui/stepper

The Navigation bundle also includes Stepper:

composer require bladewindui/navigation

Usage

<x-bladewind::stepper name="setup" current="profile" style="circles" linear="true" aria-label="Account setup">
    <x-bladewind::stepper.item name="account" label="Account" state="complete" />
    <x-bladewind::stepper.item name="profile" label="Profile" description="Personal details" />
    <x-bladewind::stepper.item name="security" label="Security" />

    <x-bladewind::stepper.content name="account">Account form</x-bladewind::stepper.content>
    <x-bladewind::stepper.content name="profile" has-border="false">Profile form</x-bladewind::stepper.content>
    <x-bladewind::stepper.content name="security">Security form</x-bladewind::stepper.content>
</x-bladewind::stepper>

Navigate with showStepperStep(name, step), nextStepperStep(name), previousStepperStep(name), and resetStepper(name). Listen for the cancelable bladewind:stepper:before-change event to validate a step. Successful changes emit bladewind:stepper:changed; advancing beyond the last enabled step emits bladewind:stepper:complete.

The root current prop is the canonical initial selection and takes precedence over a conflicting item state="current" value.

Choose circles, chevrons, bars, or line with the root style prop. The default is circles. Every style uses the same states, content panels, navigation helpers, events, keyboard behavior, and accessibility semantics.

circles, bars, and line support horizontal and vertical orientation. chevrons is horizontal-only; a vertical Chevron request falls back to circles.

Content panels have a border by default. Set has-border="false" on stepper.content when another component, such as Card, provides the visible content surface.

Documentation

Full documentation and live examples are at bladewindui.com/component/stepper.

Livewire

The current step lives in the stepper's own DOM, not in Livewire's component state. A Livewire re-render that touches this markup for reasons unrelated to the stepper resets it back to its initial step — wrap the stepper in wire:ignore if it sits inside such a component. The delegated event bindings are idempotent, so a re-render does not create duplicate listeners.

License

MIT. See the LICENSE file.

bladewindui / stepper

Package info

Security

Statistics