Multi-Step component

[jechazelle]

I would like to start a discussion about implementing multi-step component.

We could use the component like this:

<flux:steps>
    <flux:step icon="check" label="General">
        <livewire.step_form1 />
    </flux:step>

    <flux:step icon="check" label="Location">
        <livewire.step_form2 />
    </flux:step>

    <flux:step icon="check" label="Additional">
        <livewire.step_form3 />
    </flux:step>

    <flux:step icon="check" label="Advanced">
        <livewire.step_form4 />
    </flux:step>
</flux:steps>

On front:

[mauritskorse]

Could this be some tab variant?

    <flux:tab.group>
        <flux:tabs class="items-center w-96 !border-b-0">
            <flux:tab name="profile" icon="check">Profile</flux:tab>
            <flux:separator />
            <flux:tab name="account" icon="check">Account</flux:tab>
            <flux:separator />
            <flux:tab name="billing" icon="check">Billing</flux:tab>
        </flux:tabs>
    
        <flux:tab.panel name="profile">...</flux:tab.panel>
        <flux:tab.panel name="account">...</flux:tab.panel>
        <flux:tab.panel name="billing">...</flux:tab.panel>
    </flux:tab.group>

[SeraphixMD]

Just thinking about this briefly, wouldn't this already be possible to implement with tab groups? Make the tab selector read-only, and have the continue and back buttons switch the tabs with some JS? That being said, the visuals wouldn't imply that this is a multi-step form, so that's another issue.

I implemented my own multi-step form some time ago with Alpine and a backing Livewire component, didn't think about using Flux in this way.

[ju5t]

Some accessible components that can be used to display the steps of the wizard could be useful. The actual functionality to build a multi-step wizard is not something a component library should support.

There are plenty of alternatives that do this already:

• https://spatie.be/docs/laravel-livewire-wizard/v2/introduction
• https://github.com/satoved/laravel-livewire-steps
• https://filamentphp.com/docs/3.x/forms/layout/wizard

[jamesautodude]

True. Don't have to use for flux UI for everything :)