Getting Started
Your first form
Define a Laravel form schema, return it through Inertia, and validate it in a controller.
Forms are regular PHP classes resolved through Laravel's container. They define functional behavior; layout, CSS classes, variants, and icons remain in your Vue application.
Define the schema
app/Forms/ProfileForm.php
<?php
namespace App\Forms;
use Inertify\Form\Fields\Checkbox;
use Inertify\Form\Fields\Submit;
use Inertify\Form\Fields\Textarea;
use Inertify\Form\Fields\TextInput;
use Inertify\Form\Form;
final class ProfileForm extends Form
{
protected bool $unsavedWarning = true;
protected bool $scrollToFirstError = true;
public function fields(): array
{
return [
TextInput::make('name', 'Name')
->required()
->maxLength(120)
->precognitive(),
TextInput::make('email', 'Email')
->email()
->required()
->precognitive(),
Checkbox::make('is_employed', 'Currently employed')
->default(false),
TextInput::make('company', 'Company')
->visibleWhen('is_employed', true)
->clearWhenHidden(),
Textarea::make('bio', 'Biography')->maxLength(1000),
Submit::make('Save profile'),
];
}
}
Return the form through Inertia
Pass the form instance directly as an Inertia property. It receives the current request and owning property key while it is serialized.
app/Http/Controllers/ProfileController.php
use App\Forms\ProfileForm;
use App\Models\Profile;
use Inertia\Inertia;
use Inertia\Response;
public function edit(Profile $profile): Response
{
return Inertia::render('Profiles/Edit', [
'form' => ProfileForm::make()
->bind($profile, except: ['internal_note'])
->route('profiles.update', ['profile' => $profile])
->patch(),
]);
}
Do not pre-serialize the form or call
toArray() before passing it to Inertia. Context-aware features such as remote options need the active request and property key.Authorize and validate
Type the form on a controller argument and add #[Validate]. Laravel resolves it, binds the current request, runs form authorization, and validates before entering the method.
app/Http/Controllers/ProfileController.php
use App\Forms\ProfileForm;
use App\Models\Profile;
use Illuminate\Http\RedirectResponse;
use Inertify\Form\Validate;
public function update(
#[Validate] ProfileForm $form,
Profile $profile,
): RedirectResponse {
$profile->update($form->validated(files: false));
return back()->with('success', 'Profile updated.');
}
You can also call setRequest(), validate(), and validated() explicitly. Read resolved initial values with data() and override them with data([...]).
Continue with Vue rendering to give this schema application-owned markup.