Forms Documentation

Appearance

Introduction ​

Inertia Forms is part of Inertia UI, a suite of packages designed for Laravel, Inertia.js, and Tailwind CSS. It lets you define forms entirely in PHP and render them automatically with the frontend package for your stack.

It ships with matching Vue 3.5+ and React 19 packages. The same PHP Form class drives both frontends; you only choose whether your page imports from @inertiaui/form-vue or @inertiaui/form-react.

Define your fields in PHP, pass the form to your Inertia page, and render it with a single component. That's the whole workflow.

Quick Example ​

Here's a complete form, backend and frontend:

php
use InertiaUI\Forms\Fields\Combobox;
use InertiaUI\Forms\Fields\Submit;
use InertiaUI\Forms\Fields\TextInput;
use InertiaUI\Forms\Form;

class CreateUserForm extends Form
{
    protected ?string $actionRoute = 'users.store';

    public function fields(): array
    {
        return [
            TextInput::make('name')->required()->precognitive(),
            TextInput::make('email')->email()->required(),
            Combobox::make('role')->options(Role::pluck('name', 'id')),
            Submit::make('Create User'),
        ];
    }
}

Pass it to your page:

php
return Inertia::render('Users/Create', [
    'form' => CreateUserForm::make(),
]);

Render it in your frontend:

vue
<script setup>
import { Form } from '@inertiaui/form-vue'

defineProps(['form'])
</script>

<template>
    <Form :form="form" />
</template>
tsx
import { Form } from '@inertiaui/form-react'

export default function CreateUser({ form }) {
    return <Form form={form} />
}

One PHP class. One frontend component. You get a fully functional, styled form with validation, error handling, and submission wired up automatically.

Features ​

  • PHP-defined forms: Define fields, validation, labels, help text, layout, and submit behavior in a Laravel form class.
  • Vue and React rendering: The same serialized form renders through the Vue or React package for your stack.
  • Broad field coverage: Text, URL, choice, record, date/time, color, slider, upload, editor, composer, collection, block, key/value, OTP, display helper, fieldset, and submit controls are included.
  • Validation and Precognition: Generate Laravel rules from field configuration and validate selected fields on blur.
  • Conditional visibility: Show, hide, and clear fields or fieldsets based on other field values.
  • File uploads: Temporary uploads, chunked uploads, direct-to-storage uploads, previews, reordering, and Spatie Media Library integration.
  • Model binding: Bind an Eloquent model or array and let fields read their initial values.
  • Authorization and styling: Gate field/form visibility and customize generated markup with presentation options and Tailwind theme tokens.
  • Standalone components: Render exported Vue and React controls directly when a form section should not come from a PHP payload.
  • Extensibility: Add macros, register custom fields, or clone built-in presenters with hooks and composables.

How It Works ​

Inertia Forms follows a simple pipeline:

  1. You define a Form class with a fields() method that returns an array of field instances
  2. Form::make() serializes the form to a JSON-friendly array via toArray()
  3. Inertia passes this array as a prop to your page
  4. The <Form> component reads the field definitions and renders the appropriate input component for each one
  5. On submit, the form posts to your defined action route using Inertia's form helper

The frontend package handles the UI: input rendering, error display, validation triggers, loading states, and form submission. You define the structure in PHP.

Next Steps ​