Forms

Inertia provides two primary ways to build forms: the <Form> component and the useForm helper. Both integrate with your server-side framework’s validation and handle form submissions without full page reloads.

Form Component

Inertia provides a <Form> component that behaves much like a classic HTML form, but uses Inertia under the hood to avoid full page reloads. This is the simplest way to get started with forms in Inertia.

Vue

<script setup>
import { Form } from '@inertiajs/vue3'
</script>

<template>
    <Form action="/users" method="post">
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Create User</button>
    </Form>
</template>

import { Form } from '@inertiajs/react'

export default () => (
    <Form action="/users" method="post">
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Create User</button>
    </Form>
)

<script>
    import { Form } from '@inertiajs/svelte'
</script>

<Form action="/users" method="post">
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Create User</button>
</Form>

The component also supports nested data structures, file uploads, and dotted key notation.

Vue

<template>
    <Form action="/reports" method="post">
        <input type="text" name="name" />
        <textarea name="report[description]"></textarea>
        <input type="text" name="report[tags][]" />
        <input type="file" name="documents" multiple />
        <button type="submit">Create Report</button>
    </Form>
</template>

<Form action="/reports" method="post">
    <input type="text" name="name" />
    <textarea name="report[description]"></textarea>
    <input type="text" name="report[tags][]" />
    <input type="file" name="documents" multiple />
    <button type="submit">Create Report</button>
</Form>

<Form action="/reports" method="post">
    <input type="text" name="name" />
    <textarea name="report[description]"></textarea>
    <input type="text" name="report[tags][]" />
    <input type="file" name="documents" multiple />
    <button type="submit">Create Report</button>
</Form>

You can pass a transform prop to modify the form data before submission. This is useful for injecting additional fields or transforming existing data, although hidden inputs work too.

Vue

<template>
    <Form
        action="/posts"
        method="post"
        :transform="data => ({ ...data, user_id: 123 })"
    >
        <input type="text" name="title" />
        <button type="submit">Create Post</button>
    </Form>
</template>

<Form
    action="/posts"
    method="post"
    transform={data => ({ ...data, user_id: 123 })}
>
    <input type="text" name="title" />
    <button type="submit">Create Post</button>
</Form>

<Form
    action="/posts"
    method="post"
    transform={data => ({ ...data, user_id: 123 })}
>
    <input type="text" name="title" />
    <button type="submit">Create Post</button>
</Form>

Wayfinder

When using Wayfinder, you can pass the resulting object directly to the action prop. The Form component will infer the HTTP method and URL from the Wayfinder object.

Vue

<script setup>
import { Form } from '@inertiajs/vue3'
import { store } from 'App/Http/Controllers/UserController'
</script>

<template>
    <Form :action="store()">
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Create User</button>
    </Form>
</template>

import { Form } from '@inertiajs/react'
import { store } from 'App/Http/Controllers/UserController'

export default () => (
    <Form action={store()}>
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Create User</button>
    </Form>
)

<script>
    import { Form } from '@inertiajs/svelte'
    import { store } from 'App/Http/Controllers/UserController'
</script>

<Form action={store()}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Create User</button>
</Form>

Default Values

Vue

<template>
    <Form action="/users" method="post">
        <input type="text" name="name" defaultValue="John Doe" />

        <select name="country">
            <option value="us">United States</option>
            <option value="ca">Canada</option>
            <option value="uk" selected>United Kingdom</option>
        </select>

        <input type="checkbox" name="subscribe" value="yes" defaultChecked />

        <button type="submit">Submit</button>
    </Form>
</template>

<Form action="/users" method="post">
    <input type="text" name="name" defaultValue="John Doe" />

    <select name="country" defaultValue="uk">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
    </select>

    <input type="checkbox" name="subscribe" value="yes" defaultChecked />

    <button type="submit">Submit</button>
</Form>

<Form action="/users" method="post">
    <input type="text" name="name" value="John Doe" />

    <select name="country" value="uk">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
    </select>

    <input type="checkbox" name="subscribe" value="yes" checked />

    <button type="submit">Submit</button>
</Form>

Checkbox Inputs

When working with checkboxes, you may want to add an explicit value attribute such as value="1". Without a value attribute, checked checkboxes will submit as "on", which some server-side validation rules may not recognize as a proper boolean value.

Slot Props

The <Form> component exposes reactive state and helper methods through its default slot, giving you access to form processing state, errors, and utility functions.

Vue

<template>
    <Form
        action="/users"
        method="post"
        #default="{
            errors,
            hasErrors,
            processing,
            progress,
            wasSuccessful,
            recentlySuccessful,
            setError,
            clearErrors,
            resetAndClearErrors,
            defaults,
            isDirty,
            reset,
            submit,
        }"
    >
        <input type="text" name="name" />

        <div v-if="errors.name">
            {{ errors.name }}
        </div>

        <button type="submit" :disabled="processing">
            {{ processing ? 'Creating...' : 'Create User' }}
        </button>

        <div v-if="wasSuccessful">User created successfully!</div>
    </Form>
</template>

<Form action="/users" method="post">
    {({
        errors,
        hasErrors,
        processing,
        progress,
        wasSuccessful,
        recentlySuccessful,
        setError,
        clearErrors,
        resetAndClearErrors,
        defaults,
        isDirty,
        reset,
        submit,
    }) => (
        <input type="text" name="name" />

        {errors.name && <div>{errors.name}</div>}

        <button type="submit" disabled={processing}>
            {processing ? 'Creating...' : 'Create User'}
        </button>

        {wasSuccessful && <div>User created successfully!</div>}
    )}
</Form>

<Form
    action="/users"
    method="post"
    let:errors
    let:hasErrors
    let:processing
    let:progress
    let:wasSuccessful
    let:recentlySuccessful
    let:setError
    let:clearErrors
    let:resetAndClearErrors
    let:defaults
    let:isDirty
    let:reset
    let:submit
>
    <input type="text" name="name" />

    {#if errors.name}
        <div>{errors.name}</div>
    {/if}

    <button type="submit" disabled={processing}>
        {processing ? 'Creating...' : 'Create User'}
    </button>

    {#if wasSuccessful}
        <div>User created successfully!</div>
    {/if}
</Form>

<Form action="/users" method="post">
    {#snippet children({
        errors,
        hasErrors,
        processing,
        progress,
        wasSuccessful,
        recentlySuccessful,
        setError,
        clearErrors,
        resetAndClearErrors,
        defaults,
        isDirty,
        reset,
        submit,
    })}
        <input type="text" name="name" />

        {#if errors.name}
            <div>{errors.name}</div>
        {/if}

        <button type="submit" disabled={processing}>
            {processing ? 'Creating...' : 'Create User'}
        </button>

        {#if wasSuccessful}
            <div>User created successfully!</div>
        {/if}
    {/snippet}
</Form>

The defaults method allows you to update the form’s default values to match the current field values. When called, subsequent reset() calls will restore fields to these new defaults, and the isDirty property will track changes from these updated defaults. Unlike useForm, this method accepts no arguments and always uses all current form values.

The errors object uses dotted notation for nested fields, allowing you to display validation messages for complex form structures.

Vue

<Form action="/users" method="post" #default="{ errors }">
    <input type="text" name="user.name" />
    <div v-if="errors['user.name']">{{ errors['user.name'] }}</div>
</Form>

<Form action="/users" method="post">
    {({ errors }) => (
        <input type="text" name="user.name" />
        {errors['user.name'] && <div>{errors['user.name']}</div>}
    )}
</Form>

<Form action="/users" method="post" let:errors>
    <input type="text" name="user.name" />
    {#if errors['user.name']}
        <div>{errors['user.name']}</div>
    {/if}
</Form>

<Form action="/users" method="post">
    {#snippet children({ errors })}
        <input type="text" name="user.name" />
        {#if errors['user.name']}
            <div>{errors['user.name']}</div>
        {/if}
    {/snippet}
</Form>

Props and Options

In addition to action and method, the <Form> component accepts several props. Many of them are identical to the options available in Inertia’s visit options.

Vue

<template>
    <Form
        action="/profile"
        method="put"
        error-bag="profile"
        query-string-array-format="indices"
        :headers="{ 'X-Custom-Header': 'value' }"
        :show-progress="false"
        :transform="data => ({ ...data, timestamp: Date.now() })"
        :invalidate-cache-tags="['users', 'dashboard']"
        disable-while-processing
        :options="{
            preserveScroll: true,
            preserveState: true,
            preserveUrl: true,
            replace: true,
            only: ['users', 'flash'],
            except: ['secret'],
            reset: ['page'],
        }"
    >
        <input type="text" name="name" />
        <button type="submit">Update</button>
    </Form>
</template>

<Form
    action="/profile"
    method="put"
    errorBag="profile"
    queryStringArrayFormat="indices"
    headers={{ 'X-Custom-Header': 'value' }}
    showProgress={false}
    transform={data => ({ ...data, timestamp: Date.now() })}
    invalidateCacheTags={['users', 'dashboard']}
    disableWhileProcessing
    options={{
        preserveScroll: true,
        preserveState: true,
        preserveUrl: true,
        replace: true,
        only: ['users', 'flash'],
        except: ['secret'],
        reset: ['page'],
    }}
>
    <input type="text" name="name" />
    <button type="submit">Update</button>
</Form>

<Form
    action="/profile"
    method="put"
    errorBag="profile"
    queryStringArrayFormat="indices"
    headers={{ 'X-Custom-Header': 'value' }}
    showProgress={false}
    transform={data => ({ ...data, timestamp: Date.now() })}
    invalidateCacheTags={['users', 'dashboard']}
    disableWhileProcessing
    options={{
        preserveScroll: true,
        preserveState: true,
        preserveUrl: true,
        replace: true,
        only: ['users', 'flash'],
        except: ['secret'],
        reset: ['page'],
    }}
>
    <input type="text" name="name" />
    <button type="submit">Update</button>
</Form>

Some props are intentionally grouped under options instead of being top-level to avoid confusion. For example, only, except, and reset relate to partial reloads, not partial submissions. The general rule: top-level props are for the form submission itself, while options control how Inertia handles the subsequent visit.

To style the form while it’s processing, you can target the inert form in the following ways.

Tailwind 4

<Form
    action="/profile"
    method="put"
    disableWhileProcessing
    className="inert:opacity-50 inert:pointer-events-none"
>
    {/* Your form fields here */}
</Form>

form[inert] {
    opacity: 0.5;
    pointer-events: none;
}

Events

The <Form> component emits all the standard visit events for form submissions.

Vue

<template>
    <Form
        action="/users"
        method="post"
        @before="handleBefore"
        @start="handleStart"
        @progress="handleProgress"
        @success="handleSuccess"
        @error="handleError"
        @finish="handleFinish"
        @cancel="handleCancel"
        @cancelToken="handleCancelToken"
    >
        <input type="text" name="name" />
        <button type="submit">Create User</button>
    </Form>
</template>

<Form
    action="/users"
    method="post"
    onCancelToken={handleCancelToken}
    onBefore={handleBefore}
    onStart={handleStart}
    onProgress={handleProgress}
    onCancel={handleCancel}
    onSuccess={handleSuccess}
    onError={handleError}
    onFinish={handleFinish}
>
    <input type="text" name="name" />
    <button type="submit">Create User</button>
</Form>

<Form
    action="/users"
    method="post"
    on:cancelToken={handleCancelToken}
    on:before={handleBefore}
    on:start={handleStart}
    on:progress={handleProgress}
    on:cancel={handleCancel}
    on:success={handleSuccess}
    on:error={handleError}
    on:finish={handleFinish}
>
    <input type="text" name="name" />
    <button type="submit">Create User</button>
</Form>

<Form
    action="/users"
    method="post"
    onCancelToken={handleCancelToken}
    onBefore={handleBefore}
    onStart={handleStart}
    onProgress={handleProgress}
    onCancel={handleCancel}
    onSuccess={handleSuccess}
    onError={handleError}
    onFinish={handleFinish}
>
    <input type="text" name="name" />
    <button type="submit">Create User</button>
</Form>

Resetting the Form

The Form component provides several attributes that allow you to reset the form after a submission.

resetOnSuccess may be used to reset the form after a successful submission.

Vue

<template>
    <!-- Reset the entire form on success -->
    <Form action="/users" method="post" resetOnSuccess>
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>

    <!-- Reset specific fields on success -->
    <Form action="/users" method="post" :resetOnSuccess="['name']">
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>
</template>

// Reset the entire form on success
<Form action="/users" method="post" resetOnSuccess>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

// Reset specific fields on success
<Form action="/users" method="post" resetOnSuccess={['name']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

<!-- Reset the entire form on success -->
<Form action="/users" method="post" resetOnSuccess>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

<!-- Reset specific fields on success -->
<Form action="/users" method="post" resetOnSuccess={['name']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

resetOnError may be used to reset the form after errors.

Vue

<template>
    <!-- Reset the entire form on success -->
    <Form action="/users" method="post" resetOnError>
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>

    <!-- Reset specific fields on success -->
    <Form action="/users" method="post" :resetOnError="['name']">
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>
</template>

// Reset the entire form on success
<Form action="/users" method="post" resetOnError>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

// Reset specific fields on success
<Form action="/users" method="post" resetOnError={['name']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

<!-- Reset the entire form on success -->
<Form action="/users" method="post" resetOnError>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

<!-- Reset specific fields on success -->
<Form action="/users" method="post" resetOnError={['name']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

Setting New Default Values

The Form component provides the setDefaultsOnSuccess attribute to set the current form values as the new defaults after a successful submission.

Vue

<template>
    <Form action="/users" method="post" setDefaultsOnSuccess>
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>
</template>

<Form action="/users" method="post" setDefaultsOnSuccess>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

<Form action="/users" method="post" setDefaultsOnSuccess>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

Dotted Key Notation

The <Form> component supports dotted key notation for creating nested objects from flat input names. This provides a convenient way to structure form data.

Vue

<template>
    <Form action="/users" method="post">
        <input type="text" name="user.name" />
        <input type="text" name="user.skills[]" />
        <input type="text" name="address.street" />
        <button type="submit">Submit</button>
    </Form>
</template>

<Form action="/users" method="post">
    <input type="text" name="user.name" />
    <input type="text" name="user.skills[]" />
    <input type="text" name="address.street" />
    <button type="submit">Submit</button>
</Form>

<Form action="/users" method="post">
    <input type="text" name="user.name" />
    <input type="text" name="user.skills[]" />
    <input type="text" name="address.street" />
    <button type="submit">Submit</button>
</Form>

The example above would generate the following data structure.

{
    "user": {
        "name": "John Doe",
        "skills": ["JavaScript"]
    },
    "address": {
        "street": "123 Main St"
    }
}

If you need literal dots in your field names (not as nested object separators), you can escape them using backslashes.

Vue

<template>
    <Form action="/config" method="post">
        <input type="text" name="app\.name" />
        <input type="text" name="settings.theme\.mode" />
        <button type="submit">Save</button>
    </Form>
</template>

<Form action="/config" method="post">
    <input type="text" name="app\.name" />
    <input type="text" name="settings.theme\.mode" />
    <button type="submit">Save</button>
</Form>

<Form action="/config" method="post">
    <input type="text" name="app\.name" />
    <input type="text" name="settings.theme\.mode" />
    <button type="submit">Save</button>
</Form>

The example above would generate the following data structure.

{
    "app.name": "My Application",
    "settings": {
        "theme.mode": "dark"
    }
}

Programmatic Access

You can access the form’s methods programmatically using refs. This provides an alternative to slot props when you need to trigger form actions from outside the form.

Vue

<script setup>
import { ref } from 'vue'
import { Form } from '@inertiajs/vue3'

const formRef = ref()

const handleSubmit = () => {
    formRef.value.submit()
}
</script>

<template>
    <Form ref="formRef" action="/users" method="post">
        <input type="text" name="name" />
        <button type="submit">Submit</button>
    </Form>

    <button @click="handleSubmit">Submit Programmatically</button>
</template>

import { useRef } from 'react'
import { Form } from '@inertiajs/react'

export default function CreateUser() {
    const formRef = useRef()

    const handleSubmit = () => {
        formRef.current.submit()
    }

    return (
        <Form ref={formRef} action="/users" method="post">
            <input type="text" name="name" />
            <button type="submit">Submit</button>
        </Form>

        <button onClick={handleSubmit}>Submit Programmatically</button>
    )
}

<script>
import { Form } from '@inertiajs/svelte'

let formRef

function handleSubmit() {
    formRef.submit()
}
</script>

<Form bind:this={formRef} action="/users" method="post">
    <input type="text" name="name" />
    <button type="submit">Submit</button>
</Form>

<button on:click={handleSubmit}>Submit Programmatically</button>

In React and Vue, refs provide access to all form methods and reactive state. In Svelte, refs expose only methods, so reactive state like isDirty and errors should be accessed via slot props instead.

Form Helper

In addition to the <Form> component, Inertia also provides a useForm helper for when you need programmatic control over your form’s data and submission behavior.

Vue

<script setup>
import { useForm } from '@inertiajs/vue3'

const form = useForm({
    email: null,
    password: null,
    remember: false,
})
</script>

<template>
    <form @submit.prevent="form.post('/login')">
        <input type="text" v-model="form.email">
        <div v-if="form.errors.email">{{ form.errors.email }}</div>
        <input type="password" v-model="form.password">
        <div v-if="form.errors.password">{{ form.errors.password }}</div>
        <input type="checkbox" v-model="form.remember"> Remember Me
        <button type="submit" :disabled="form.processing">Login</button>
    </form>
</template>

import { useForm } from '@inertiajs/react'

const { data, setData, post, processing, errors } = useForm({
    email: '',
    password: '',
    remember: false,
})

function submit(e) {
    e.preventDefault()
    post('/login')
}

return (
    <form onSubmit={submit}>
        <input type="text" value={data.email} onChange={e => setData('email', e.target.value)} />
        {errors.email && <div>{errors.email}</div>}
        <input type="password" value={data.password} onChange={e => setData('password', e.target.value)} />
        {errors.password && <div>{errors.password}</div>}
        <input type="checkbox" checked={data.remember} onChange={e => setData('remember', e.target.checked)} /> Remember Me
        <button type="submit" disabled={processing}>Login</button>
    </form>
)

<script>
import { useForm } from '@inertiajs/svelte'

const form = useForm({
    email: null,
    password: null,
    remember: false,
})

function submit() {
    $form.post('/login')
}
</script>

<form on:submit|preventDefault={submit}>
    <input type="text" bind:value={$form.email} />
    {#if $form.errors.email}
        <div class="form-error">{$form.errors.email}</div>
    {/if}
    <input type="password" bind:value={$form.password} />
    {#if $form.errors.password}
        <div class="form-error">{$form.errors.password}</div>
    {/if}
    <input type="checkbox" bind:checked={$form.remember} /> Remember Me
    <button type="submit" disabled={$form.processing}>Submit</button>
</form>

<script>
import { useForm } from '@inertiajs/svelte'

const form = useForm({
    email: null,
    password: null,
    remember: false,
})

function submit(e) {
    e.preventDefault()
    $form.post('/login')
}
</script>

<form onsubmit={submit}>
    <input type="text" bind:value={$form.email} />
    {#if $form.errors.email}
        <div class="form-error">{$form.errors.email}</div>
    {/if}
    <input type="password" bind:value={$form.password} />
    {#if $form.errors.password}
        <div class="form-error">{$form.errors.password}</div>
    {/if}
    <input type="checkbox" bind:checked={$form.remember} /> Remember Me
    <button type="submit" disabled={$form.processing}>Submit</button>
</form>

To submit the form, you may use the get, post, put, patchand delete methods.

Vue

form.submit(method, url, options)
form.get(url, options)
form.post(url, options)
form.put(url, options)
form.patch(url, options)
form.delete(url, options)

const { submit, get, post, put, patch, delete: destroy } = useForm({ ... })

submit(method, url, options)
get(url, options)
post(url, options)
put(url, options)
patch(url, options)
destroy(url, options)

$form.submit(method, url, options)
$form.get(url, options)
$form.post(url, options)
$form.put(url, options)
$form.patch(url, options)
$form.delete(url, options)

The submit methods support all of the typical visit options, such as preserveState, preserveScroll, and event callbacks, which can be helpful for performing tasks on successful form submissions. For example, you might use the onSuccess callback to reset inputs to their original state.

Vue

form.post('/profile', {
    preserveScroll: true,
    onSuccess: () => form.reset('password'),
})

const { post, reset } = useForm({ ... })

post('/profile', {
    preserveScroll: true,
    onSuccess: () => reset('password'),
})

$form.post('/profile', {
    preserveScroll: true,
    onSuccess: () => $form.reset('password'),
})

If you need to modify the form data before it’s sent to the server, you can do so via the transform() method.

Vue

form
    .transform((data) => ({
        ...data,
        remember: data.remember ? 'on' : '',
    }))
    .post('/login')

const { transform } = useForm({ ... })

transform((data) => ({
    ...data,
    remember: data.remember ? 'on' : '',
}))

$form
    .transform((data) => ({
        ...data,
        remember: data.remember ? 'on' : '',
    }))
    .post('/login')

You can use the processing property to track if a form is currently being submitted. This can be helpful for preventing double form submissions by disabling the submit button.

Vue

<button type="submit" :disabled="form.processing">Submit</button>

const { processing } = useForm({ ... })

<button type="submit" disabled={processing}>Submit</button>

<button type="submit" disabled={$form.processing}>Submit</button>

If your form is uploading files, the current progress event is available via the progress property, allowing you to easily display the upload progress.

Vue

<progress v-if="form.progress" :value="form.progress.percentage" max="100">
    {{ form.progress.percentage }}%
</progress>

const { progress } = useForm({ ... })

{progress && (
    <progress value={progress.percentage} max="100">
        {progress.percentage}%
    </progress>
)}

{#if $form.progress}
    <progress value={$form.progress.percentage} max="100">
        {$form.progress.percentage}%
    </progress>
{/if}

Form Errors

If there are form validation errors, they are available via the errors property. When building Laravel powered Inertia applications, form errors will automatically be populated when your application throws instances of ValidationException, such as when using {'$request->validate()'}.

Vue

<div v-if="form.errors.email">{{ form.errors.email }}</div>

const { errors } = useForm({ ... })

{errors.email && <div>{errors.email}</div>}

{#if $form.errors.email}
    <div>{$form.errors.email}</div>
{/if}

For a more thorough discussion of form validation and errors, please consult the validation documentation.

To determine if a form has any errors, you may use the hasErrors property. To clear form errors, use the clearErrors() method.

Vue

// Clear all errors...
form.clearErrors()

// Clear errors for specific fields...
form.clearErrors('field', 'anotherfield')

const { clearErrors } = useForm({ ... })

// Clear all errors...
clearErrors()

// Clear errors for specific fields...
clearErrors('field', 'anotherfield')

// Clear all errors...
$form.clearErrors()

// Clear errors for specific fields...
$form.clearErrors('field', 'anotherfield')

If you’re using client-side input validation libraries or do client-side validation manually, you can set your own errors on the form using the setErrors() method.

Vue

// Set a single error...
form.setError('field', 'Your error message.');

// Set multiple errors at once...
form.setError({
    foo: 'Your error message for the foo field.',
    bar: 'Some other error for the bar field.'
});

const { setError } = useForm({ ... })

// Set a single error...
setError('field', 'Your error message.');

// Set multiple errors at once...
setError({
    foo: 'Your error message for the foo field.',
    bar: 'Some other error for the bar field.'
});

// Set a single error
$form.setError('field', 'Your error message.');

// Set multiple errors at once
$form.setError({
    foo: 'Your error message for the foo field.',
    bar: 'Some other error for the bar field.'
});

Unlike an actual form submission, the page’s props remain unchanged when manually setting errors on a form instance.

When a form has been successfully submitted, the wasSuccessful property will be true. In addition to this, forms have a recentlySuccessful property, which will be set to true for two seconds after a successful form submission. This property can be utilized to show temporary success messages.

You may customize the duration of the recentlySuccessful state by setting the form.recentlySuccessfulDuration option in your application defaults. The default value is 2000 milliseconds.

Resetting the Form

To reset the form’s values back to their default values, you can use the reset() method.

Vue

// Reset the form...
form.reset()

// Reset specific fields...
form.reset('field', 'anotherfield')

const { reset } = useForm({ ... })

// Reset the form...
reset()

// Reset specific fields...
reset('field', 'anotherfield')

// Reset the form...
$form.reset()

// Reset specific fields...
$form.reset('field', 'anotherfield')

Sometimes, you may want to restore your form fields to their default values and clear any validation errors at the same time. Instead of calling reset() and clearErrors() separately, you can use the resetAndClearErrors() method, which combines both actions into a single call.

Vue

// Reset the form and clear all errors...
form.resetAndClearErrors()

// Reset specific fields and clear their errors...
form.resetAndClearErrors('field', 'anotherfield')

const { resetAndClearErrors } = useForm({ ... })

// Reset the form and clear all errors...
resetAndClearErrors()

// Reset specific fields and clear their errors...
resetAndClearErrors('field', 'anotherfield')

// Reset the form and clear all errors...
$form.resetAndClearErrors()

// Reset specific fields and clear their errors...
$form.resetAndClearErrors('field', 'anotherfield')

Setting New Default Values

If your form’s default values become outdated, you can use the defaults() method to update them. Then, the form will be reset to the correct values the next time the reset() method is invoked.

Vue

// Set the form's current values as the new defaults...
form.defaults()

// Update the default value of a single field...
form.defaults('email', '[e-mail]')

// Update the default value of multiple fields...
form.defaults({
    name: 'Updated Example',
    email: '[e-mail]',
})

const { setDefaults } = useForm({ ... })

// Set the form's current values as the new defaults...
setDefaults()

// Update the default value of a single field...
setDefaults('email', '[e-mail]')

// Update the default value of multiple fields...
setDefaults({
    name: 'Updated Example',
    email: '[e-mail]',
})

// Set the form's current values as the new defaults...
$form.defaults()

// Update the default value of a single field...
$form.defaults('email', '[e-mail]')

// Change the default value of multiple fields...
$form.defaults({
    name: 'Updated Example',
    email: '[e-mail]',
})

Form Field Change Tracking

To determine if a form has any changes, you may use the isDirty property.

Vue

<div v-if="form.isDirty">There are unsaved form changes.</div>

const { isDirty } = useForm({ ... })

{isDirty && <div>There are unsaved form changes.</div>}

{#if $form.isDirty}
    <div>There are unsaved form changes.</div>
{/if}

Canceling Form Submissions

To cancel a form submission, use the cancel() method.

Vue

form.cancel()

const { cancel } = useForm({ ... })

cancel()

$form.cancel()

Form Data and History State

To instruct Inertia to store a form’s data and errors in history state, you can provide a unique form key as the first argument when instantiating your form.

Vue

import { useForm } from '@inertiajs/vue3'

const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}\

import { useForm } from '@inertiajs/react'

const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}\

import { useForm } from '@inertiajs/svelte'

const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}\

Wayfinder

v2.0.6+

When using Wayfinder in conjunction with the form helper, you can simply pass the resulting object directly to the form.submit method. The form helper will infer the HTTP method and URL from the Wayfinder object.

Vue

import { useForm } from '@inertiajs/vue3'
import { store } from 'App/Http/Controllers/UserController'

const form = useForm({
    name: 'John Doe',
    email: '[e-mail]',
})

form.submit(store())

import { useForm } from '@inertiajs/react'
import { store } from 'App/Http/Controllers/UserController'

const form = useForm({
    name: 'John Doe',
    email: '[e-mail]',
})

form.submit(store())

import { useForm } from '@inertiajs/svelte'
import { store } from 'App/Http/Controllers/UserController'

const form = useForm({
    name: 'John Doe',
    email: '[e-mail]',
})

form.submit(store())

Server-Side Responses

When using Inertia, you don’t typically inspect form responses client-side like you would with traditional XHR/fetch requests. Instead, your server-side route or controller issues a redirect response after processing the form, often redirecting to a success page.

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'users' => User::all(),
        ]);
    }

    public function store(Request $request)
    {
        User::create($request->validate([
            'first_name' => ['required', 'max:50'],
            'last_name' => ['required', 'max:50'],
            'email' => ['required', 'max:50', 'email'],
        ]));

        return to_route('users.index');
    }
}

This redirect-based approach works with all form submission methods: the <Form> component, useForm helper, and manual router submissions. It makes handling Inertia forms feel very similar to classic server-side form submissions.

Server-Side Validation

Both the <Form> component and useForm helper automatically handle server-side validation errors. When your server returns validation errors, they’re automatically available in the errors object without any additional configuration.

Unlike traditional XHR/fetch requests where you might check for a 422 status code, Inertia handles validation errors as part of its redirect-based flow, just like classic server-side form submissions, but without the full page reload.

For a complete guide on validation error handling, including error bags and advanced scenarios, see the validation documentation.

Manual Form Submissions

It’s also possible to submit forms manually using Inertia’s router methods directly, without using the <Form> component or useForm helper:

Vue

<script setup>
import { reactive } from 'vue'
import { router } from '@inertiajs/vue3'

const form = reactive({
    first_name: null,
    last_name: null,
    email: null,
})

function submit() {
    router.post('/users', form)
}
</script>

<template>
    <form @submit.prevent="submit">
        <label for="first_name">First name:</label>
        <input id="first_name" v-model="form.first_name" />
        <label for="last_name">Last name:</label>
        <input id="last_name" v-model="form.last_name" />
        <label for="email">Email:</label>
        <input id="email" v-model="form.email" />
        <button type="submit">Submit</button>
    </form>
</template>

import { useState } from 'react'
import { router } from '@inertiajs/react'

export default function Edit() {
    const [values, setValues] = useState({
        first_name: "",
        last_name: "",
        email: "",
    })

    function handleChange(e) {
        const key = e.target.id;
        const value = e.target.value
        setValues(values => ({
                ...values,
                [key]: value,
        }))
    }

    function handleSubmit(e) {
        e.preventDefault()
        router.post('/users', values)
    }

    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="first_name">First name:</label>
            <input id="first_name" value={values.first_name} onChange={handleChange} />
            <label htmlFor="last_name">Last name:</label>
            <input id="last_name" value={values.last_name} onChange={handleChange} />
            <label htmlFor="email">Email:</label>
            <input id="email" value={values.email} onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    )
}

<script>
import { router } from '@inertiajs/svelte'

let values = {
    first_name: null,
    last_name: null,
    email: null,
}

function submit() {
    router.post('/users', values)
}
</script>

<form on:submit|preventDefault={submit}>
    <label for="first_name">First name:</label>
    <input id="first_name" bind:value={values.first_name}>

    <label for="last_name">Last name:</label>
    <input id="last_name" bind:value={values.last_name}>

    <label for="email">Email:</label>
    <input id="email" bind:value={values.email}>

    <button type="submit">Submit</button>
</form>

<script>
import { router } from '@inertiajs/svelte'

let values = {
    first_name: null,
    last_name: null,
    email: null,
}

function submit(e) {
    e.preventDefault()
    router.post('/users', values)
}
</script>

<form onsubmit={submit}>
    <label for="first_name">First name:</label>
    <input id="first_name" bind:value={values.first_name}>

    <label for="last_name">Last name:</label>
    <input id="last_name" bind:value={values.last_name}>

    <label for="email">Email:</label>
    <input id="email" bind:value={values.email}>

    <button type="submit">Submit</button>
</form>

File Uploads

When making requests or form submissions that include files, Inertia will automatically convert the request data into a FormData object. This works with the <Form> component, useFormhelper, and manual router submissions.

For more information on file uploads, including progress tracking, see the file uploads documentation.

XHR / Fetch Submissions

Using Inertia to submit forms works great for the vast majority of situations. However, in the event that you need more control over the form submission, you’re free to make plain XHR or fetch requests instead, using the library of your choice.