Forms Documentation

Appearance

Installation ​

This guide shows the shared Laravel setup once, then the Vue and React frontend setup side by side. Install the Composer package once and choose the frontend package that matches your app.

Composer Authentication ​

Installing Inertia Forms requires a valid license. Your license key is available in the Inertia UI portal, where you may also purchase one.

Inertia Forms is distributed through the Inertia UI Composer repository. Add the repository to your composer.json file:

json
"repositories": [
    {
        "type": "composer",
        "url": "https://satis.inertiaui.com"
    }
]

Authenticate with your Inertia UI email address and license key:

bash
composer config --global --auth http-basic.satis.inertiaui.com "your-email-address" "your-license-key"
json
{
    "http-basic": {
        "satis.inertiaui.com": {
            "username": "your-email-address",
            "password": "your-license-key"
        }
    }
}
bash
composer config http-basic.satis.inertiaui.com "your-email-address" "your-license-key"
text
Open your server in Forge, go to Composer Package Authentication,
and add satis.inertiaui.com as the repository URL with your email
and license key. No command needed.

Local stores the credentials in ~/.composer/auth.json on your machine. Use auth.json to commit credentials alongside composer.json in a team project. Do not commit them to a public repository. On Laravel Cloud, add the composer config command to your environment's build commands before composer install. On Laravel Forge, add the credentials on the Composer Package Authentication screen of your server settings.

Composer Package ​

Install Inertia Forms using Composer:

bash
composer require inertiaui/forms

Upload Routes (Optional) ​

Skip this step if your app never accepts uploads through Inertia Forms. Register these routes in your routes/web.php file only before using temporary, chunked, or direct-to-storage uploads for File, Composer, or RichText::imageUploads():

php
Route::inertiaFormUploads();

This exposes the temporary upload, delete, chunked upload, and direct-to-storage endpoints used by those fields. Local storeWithForm() uploads are submitted with the form request and do not use these routes. The routes are protected by the web and auth middleware by default.

See File Upload Routes for custom prefixes, middleware, and per-section route groups.

Publish Configuration (Optional) ​

You may publish the runtime configuration file when you need to customize upload defaults or authorization behavior:

bash
php artisan vendor:publish --tag=inertia-forms-config

See Configuration for the full runtime config reference and File Uploads for upload transport decisions.

Frontend Package ​

After installing the Composer package, link the frontend package for your stack. This creates a package in node_modules that points to the Vue or React package bundled inside vendor.

bash
npm install vendor/inertiaui/forms/vue
bash
pnpm add file:vendor/inertiaui/forms/vue
bash
npm install vendor/inertiaui/forms/react
bash
pnpm add file:vendor/inertiaui/forms/react

Both frontend packages consume the same serialized PHP form config.

pnpm users

pnpm requires the file: protocol (pnpm add file:...) instead of a plain pnpm install.

Keep the frontend in sync

Whenever you update the Composer package, reinstall the frontend package as well. A new Composer release may include new bundled Vue or React assets, and those only reach node_modules when you rerun npm or pnpm for the linked package.

Styles ​

Import the package theme tokens and component styles from your application CSS, then use the @source directive so Tailwind scans the source files shipped in the Composer package:

css
@import "tailwindcss";
@import "@inertiaui/form-vue/theme.css";
@import "@inertiaui/form-vue/style.css";

@source "../../vendor/inertiaui/forms/vue/src/**/*.{js,ts,vue}";
css
@import "tailwindcss";
@import "@inertiaui/form-react/theme.css";
@import "@inertiaui/form-react/style.css";

@source "../../vendor/inertiaui/forms/react/src/**/*.{js,jsx,ts,tsx}";

The @source path may differ depending on your project structure. It should point to the Vue or React package source directory inside vendor/inertiaui/forms.

The theme file defines semantic tokens for the generated form UI. Override those tokens in your own CSS when you want the forms to match your app.

Tailwind turns those tokens into theme utilities, and the package also exposes stable CSS hooks for selector-based overrides. See Theme Tokens and Stable CSS Hooks for the full reference.

style.css carries the component and browser-generated DOM styles that still need CSS outside Tailwind's scanned utilities, so keep both imports for the package you use.

Vite Plugin (Optional) ​

Built-in fields are lazy by default. Without the Vite plugin, the package root export keeps the default lazy registry and loads built-in field components on demand.

Add the optional Vite plugin only when you want selected built-in fields to be registered eagerly in your app bundle. This makes those fields available immediately on the first render.

js
import { inertiaForms } from '@inertiaui/form-vue/vite'
import vue from '@vitejs/plugin-vue'

export default {
    plugins: [inertiaForms({ eager: true }), vue()],
}
js
import { inertiaForms } from '@inertiaui/form-react/vite'
import react from '@vitejs/plugin-react'

export default {
    plugins: [inertiaForms({ eager: true }), react()],
}

Use eager: true to register every built-in field eagerly.

js
inertiaForms({ eager: true })

Use an eager array when you only want specific built-in fields in the eager registry. List each field you want to include:

js
inertiaForms({ eager: ['TextInput', 'Combobox', 'File'] })

Use except only with eager: true when most built-in fields should be eager and a few should stay lazy. RichText is the usual candidate: it bundles a full editor and is by far the largest built-in field.

js
inertiaForms({ eager: true, except: ['RichText'] })

Field names must match built-in component names such as TextInput, Combobox, File, or RichText. Unknown names fail the Vite build so typos are caught before deployment.