Page type

Wizard: a long form, broken into steps.

This onboarding form runs in the sample app, published on the Online Test. It has four steps: general details, address, bank account and summary. Each one saves to its own table and is validated before advancing.

Four steps, with the whole path in view

At the top, each step has an icon and shows whether it is done, in progress or pending. Whoever fills it in sees only the fields for that moment, instead of one screen with 40 fields.

First step of the person onboarding form, with name, ID number and the four steps shown at the top — In step 1, general details, the four steps already show at the top of the screen.

Each step saves to a table

Each form section (<mad-form-section>) becomes a step. The section's name says which table that block saves to. Here there are three: person, address and bank account.

resources/views/…blade.php

<mad-form submit="onSave"><mad-form-section title="General details" icon="clipboard-list" name="dados"><mad-form-grid :cols="2"><mad-input-field name="nome" label="Name" :required="true" /><mad-input-field name="documento" label="ID number" :required="true" /></mad-form-grid></mad-form-section><mad-form-section title="Address" icon="map-pin" name="endereco__"><mad-form-grid :cols="2"><mad-input-field name="rua" label="Street" /><mad-dbcombo-field name="cidade_id" label="City" model="Cidade" display="{nome}" /></mad-form-grid></mad-form-section>...</mad-form>

Second step of the onboarding form, with street, number, neighborhood, postal code and the city picked from a list — In step 2, address, the city list comes from the database and step 1 already shows as complete.

It only advances with a valid step

The Next button only goes through if the step is valid. The error appears on the field itself, and the steps already completed stay marked. Going back doesn't erase anything that was typed.

Third step of the onboarding form, with a required-field warning below the Bank field — In step 3, the required-field warning on the bank field holds back the advance, and steps 1 and 2 stay complete.

When to use the wizard

Use it when a record has too many fields for one screen. In steps, whoever fills it in sees only what matters now, knows how much is left and fixes an error in the step where it happened.

Employee onboarding (HR). Details, address and bank account, as in the example above.
Supplier registration (purchasing). Company details, contact, bank account and the attached documents.
New customer (sales). Customer details, delivery address and payment terms.
Enrollment or sign-up. Student, guardian and payment details, with a summary to review before saving.

If the record fits on one screen, or it is a sale with line items, use the form. If the saved record still needs approval, use the approval queue. The AI agent also generates a wizard from a specification.

What you configure

The steps are the form's sections. The framework's step indicator is <mad-steps>, with one <mad-step> per step.

Section title, subtitle and icon title subtitle icon: The name of the field block, a supporting line and the icon.
Indicator style variant: The path at the top appears as arrows, dots, numbers or a progress bar.
Step name, description and icon label description icon: What the indicator shows for each step, like "Address" and a short description.
Current step current: The step in progress. The previous ones are marked complete and the following ones pending, without you marking each one.
Method that saves submit: The method called when the form is submitted, like onSave in the code above.

What goes into the Laravel project

The wizard is a multi-step form: a class in app/Control and the view with <mad-form>. In the framework's wizard pattern, the controller handles the steps like this:

Next only checks the current step. The onNext method validates just that step's rules, so nobody sees a warning for a field that hasn't appeared yet. Back (onPrev) only changes the step.
Finish saves in a transaction. The onFinish method checks the last step and saves in a database transaction.
The current step lives in the controller. It is a public property ($step), so it persists on every round trip to the server.

Like every MadBuilder screen, these files open in your editor, go into your Git and accept hand-written code in protected blocks, which stay there when the screen is regenerated. See how the code is generated.

Questions about the wizard

Does the wizard save at each step or only at the end?

You choose between saving at each step or only at the end, all at once. Either way, each step can save to a different table.

Does the wizard accept the same fields as the form?

Yes. The steps use the same field types as the form, more than 40, such as database list, date, currency and file upload.

Can I click on a step and jump straight to it?

Yes. The step indicator has a clickable mode, and a controller method receives the click and decides what happens.

And more

Save at each step or only at the endGo back without losing what was already typedA summary step before savingIcon and state for each step: done, current or pendingEach step can save to a different tableThe same field types as the form, more than 40

Create an account, build a screen, download the project.

No scheduled demo, no discovery call. If the Laravel that comes out doesn’t pass your team’s review, you lost an afternoon.

Try the app now See the generated code

Create an accountOpen beta, no credit card.
Build a screenVisually, in code, or by asking the AI.
Download the .zipA Laravel project that runs wherever you want.