Steps Element

A form example demonstrating how to use the StepsElement in VueForm Laravel to build multi-step forms with step navigation and grouped form inputs. Documentation

🧱 Import Class

use VueFormLaravel\Abstracts\VueFormBuilder;
use VueFormLaravel\Elements\Fields\TextElement;
use VueFormLaravel\Elements\Tabs\FormStepElement;
use VueFormLaravel\Elements\Vueform;

🧩 Example

• Input
• Output

class StepsElementForm extends VueFormBuilder
{
    protected function buildForm()
    {
        return Vueform::build()
            ->steps([
                FormStepElement::name('tab1')
                    ->label('tab1')
                    ->elements([
                        'input'
                    ]),
                FormStepElement::name('tab2')
                    ->label('tab2')
                    ->elements([
                        'input2'
                    ])
            ])
            ->schema([
                TextElement::name('input')->rules('required'),
                TextElement::name('input2'),
                TextElement::name('input3')
            ]);
    }
}

⚡ Events

You can define custom steps element events Documentation directly in PHP using the ->events() method.

Each event value refers to a JavaScript function name.

These functions must be defined inside:

public/vueform-laravel/vueform-custom.js

This allows you to extend or override default behaviors for your generated VueForm components

🔔 Example Usage of event (PHP)

StepsElement::name('example')
    ->events([
        'select' => 'handleSelect',
        'next' => 'handleNext',
        'previous' => 'handlePrevious',
        'finish' => 'handleFinish',
    ])

🔔 Example Usage of event(JavaScript)

function handleSelect(activeStep$, previousStep$) {
    // Your code here
}
function handleNext(step$) {
    // Your code here
}
function handlePrevious(step$) {
    // Your code here
}
function handleFinish() {
    // Your code here
}