Inertia Releases a New Form Component

The Laravel team released a new <Form/> component for Inertia, providing a component that "behaves much like a classic HTML form, but uses Inertia under the hood to avoid full page reloads."

Here's an example from the documentation that illustrates how simple using the Form component can make handling and submitting form data in Inertia:

import { Form } from '@inertiajs/react'
 
export default () => (
  <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>
)

The form component has advanced features to make writing forms with Inertia a breeze, such as slot props, form props, events, and more:

#Main Features

• Inertia-powered submission - Behaves like a classic HTML form but uses Inertia to handle submission via XHR, avoiding full page reloads.
• Slot Props - exposes state and helper methods for handling state, errors, and utility functions
• Form Props - The Form component provides props that are available in Inertia's visit options
• Events - The Form component provides events to handle actions like submit, cancel, success, error, etc.
• Dotted Key Notation - the Form component allows dotted name="user.name" key notation to structure form data, as well as using the transform prop to modify form data before submission
• Programmatic Access - you can programatically use form methods via a ref if you need to trigger actions outside of the form

The Form component is available for Vue, React, and Svelte, and is available starting in Inertia v2.1.0. You can see the implementation in inertiajs/inertia Pull Request #2474. A massive shout-out to Pascal Baljet and all those involved in bringing the Form component to Inertia.

#Learn More

You can find all the details on the Official forms documentation page along with the useForm() form helpers already provided by Inertia.

Also, the Laravel React starter kit have been updated to use the Form component - check out Pull Request #149 in the React starter kit to get an idea of moving from useForm to the Form component. The Laravel Vue starter kit move to the Form component is in progress, but not released yet.