Form wizard

71 · Forms

Splits a long form into steps. The steps are listed at the top; completed steps are shown with a check mark and can be clicked to go back, while later steps can only be reached with the buttons.

PRO acun:stepper

Basic usage

steps is a key => title array. Write each step's content inside an acun:stepper.step with the same key. The buttons inside the wizard use the next(), previous(), isFirst and isLast Alpine values.

LIVE EXAMPLE

<acun:stepper :steps="['project' => 'Project', 'team' => 'Team', 'confirm' => 'Confirmation']">
    <acun:stepper.step name="project" class="grid gap-4 md:grid-cols-2">
        <acun:input name="t_name" label="Project name" />
        <acun:select name="t_plan" label="Plan" :options="['1' => 'Starter', '2' => 'Professional']" />
    </acun:stepper.step>
    <acun:stepper.step name="team" class="grid gap-4 md:grid-cols-2">
        <acun:input name="t_people" label="Number of people" type="number" />
        <acun:input name="t_phone" label="Phone" />
    </acun:stepper.step>
    <acun:stepper.step name="confirm">
        <acun:alert variant="success">The details are ready. Press Save to create the project.</acun:alert>
    </acun:stepper.step>

    <div class="mt-6 flex justify-between">
        <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Back</acun:button>
        <acun:button x-show="! isLast" x-on:click="next()">Next</acun:button>
        <acun:button x-show="isLast" x-cloak variant="success" x-on:click="$dispatch('toast', { type: 'success', message: 'Project saved.' })">Save</acun:button>
    </div>
</acun:stepper>

Prop	Values
`steps`	key => title
`acun:stepper.step name`	The key in steps
`next() · previous()`	Goes to the next / previous step
`isFirst · isLast`	true on the first / last step

Steps with descriptions

To add a short description below the title, give the step as an array: ['title' => …, 'description' => …]. The description shows in advance what the step involves.

LIVE EXAMPLE

<acun:stepper :steps="[
    'project' => ['title' => 'Project', 'description' => 'Basic details'],
    'team' => ['title' => 'Team', 'description' => 'Team members'],
    'confirm' => ['title' => 'Confirmation', 'description' => 'Review and save'],
]">
    <acun:stepper.step name="project"><acun:input name="a_name" label="Project name" /></acun:stepper.step>
    <acun:stepper.step name="team"><acun:input name="a_people" label="Number of people" type="number" /></acun:stepper.step>
    <acun:stepper.step name="confirm"><p class="text-sm text-gray-600 dark:text-zinc-400">Review the details and save.</p></acun:stepper.step>

    <div class="mt-6 flex justify-between">
        <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Back</acun:button>
        <acun:button x-on:click="next()" x-bind:disabled="isLast">Next</acun:button>
    </div>
</acun:stepper>

Prop	Values
`title`	Step title
`description`	Short description below the title

With icons

With variant="icons", each step's icon value is shown instead of a number. In this variant, completed steps keep their icon too; the check mark appears only in the numbered variant.

LIVE EXAMPLE

<acun:stepper variant="icons" :steps="[
    'account' => ['title' => 'Account', 'icon' => 'user'],
    'security' => ['title' => 'Security', 'icon' => 'lock-closed'],
    'notifications' => ['title' => 'Notifications', 'icon' => 'bell'],
]">
    <acun:stepper.step name="account"><acun:input name="i_name" label="Full name" /></acun:stepper.step>
    <acun:stepper.step name="security"><acun:input name="i_password" type="password" label="Password" viewable /></acun:stepper.step>
    <acun:stepper.step name="notifications"><acun:switch name="i_sms" label="SMS notifications" checked /></acun:stepper.step>

    <div class="mt-6 flex justify-between">
        <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Back</acun:button>
        <acun:button x-on:click="next()" x-bind:disabled="isLast">Next</acun:button>
    </div>
</acun:stepper>

Prop	Values
`variant`	numbered \| icons
`icon`	acun:icon name

Starting step

current sets the step the wizard opens on; earlier steps count as completed. Use it when resuming an unfinished record. You can write a progress text with index (zero-based) and steps.

LIVE EXAMPLE

<acun:stepper current="team" :steps="['project' => 'Project', 'team' => 'Team', 'confirm' => 'Confirmation']">
    <acun:stepper.step name="project"><acun:input name="b_name" label="Project name" value="Mobile app" /></acun:stepper.step>
    <acun:stepper.step name="team"><acun:input name="b_people" label="Number of people" type="number" /></acun:stepper.step>
    <acun:stepper.step name="confirm"><p class="text-sm text-gray-600 dark:text-zinc-400">Review the details and save.</p></acun:stepper.step>

    <div class="mt-6 flex items-center justify-between">
        <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Back</acun:button>
        <span class="text-sm text-gray-500 dark:text-zinc-400">Step <span x-text="index + 1"></span> of <span x-text="steps.length"></span></span>
        <acun:button x-on:click="next()" x-bind:disabled="isLast">Next</acun:button>
    </div>
</acun:stepper>

Prop	Values
`current`	Key of the step shown on open
`index · steps`	Current position and the step keys

With Livewire

Put the wizard inside a form and make the button on the last step type="submit". Steps are only hidden, not removed from the page; the fields of all steps are in the same form and are validated together on Save. An error in a hidden step becomes visible only when the user goes back to that step.

BLADE

<form wire:submit="save">
    <acun:stepper :steps="['project' => 'Project', 'team' => 'Team', 'confirm' => 'Confirmation']">
        <acun:stepper.step name="project"><acun:input wire:model="name" label="Project name" required /></acun:stepper.step>
        <acun:stepper.step name="team"><acun:input wire:model="peopleCount" label="Number of people" type="number" /></acun:stepper.step>
        <acun:stepper.step name="confirm">…</acun:stepper.step>

        <div class="mt-6 flex justify-between">
            <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Back</acun:button>
            <acun:button x-show="! isLast" x-on:click="next()">Next</acun:button>
            <acun:button x-show="isLast" x-cloak type="submit">Save</acun:button>
        </div>
    </acun:stepper>
</form>

Prop	Values
`type="submit"`	Submits the form on the last step

API

Props and slots

The values the component accepts.

Prop	Default	Description
`steps`	`[]`	key => title or key => ['title', 'description', 'icon']
`current`	`null`	Key of the step shown on open; the first step when empty
`variant`	`numbered`	numbered · icons
`step: name`	—	Key of the step (required); same as in steps
`Alpine: step`	—	Key of the current step
`Alpine: index, steps`	—	Current position (zero-based) and the step keys
`Alpine: next(), previous()`	—	Goes to the next / previous step
`Alpine: goTo(key)`	—	Goes back only to the current or an earlier step
`Alpine: isFirst, isLast`	—	true on the first / last step

Slots: acun:stepper: acun:stepper.step items and buttons. acun:stepper.step: the step's content; attributes such as class are added to the step's container.