2. Form component

Provides context for using form data and useInertiaInput. For rails backends, setting the prop railsAttributes to true will rewrite nested form data keys, appending the string "_attributes". This makes it possible to use accepts_nested_attributes_for in an ActiveRecord model.

Props

Prop	Default	Description
data	n/a	Default data assigned to form.data. Creates a copy which is automatically used for form data in a useInertiaInput hook
model	undefined	The root model for the form. If provided, all get and set operations in nested useInertiaInput elements will prepend the model to the dot notation string
method	'post'	HTTP method to use when submitting
to	undefined	Path to send the request to when the form is submitted. If this is omitted, submitting the form will do nothing except call onSubmit
async	false	If true, uses axios methods to send form data. If false, uses Inertia's useForm.submit method.
remember	true	If true, stores form data in local storage using the key ${method}/${model || to}.
railsAttributes	false	If true, appends '_attributes' to nested data keys before submitting. This isn't necessary for Rails to process nested data, but it makes it easier to follow Rails conventions around strong parameters and offers parity between form helpers for models using accepts_nested_attributes_for.
filter	undefined	An array of dot notation strings to call unset on before setting form data. This can be used to exclude data which you may need in your view, but do not want in your form data. For instance, an "edit" page may need the model id to pass the correct route to the to prop, while needing to exclude it from the form data. Allows special [] syntax to filter values of objects in arrays. For example: model.collection[].createdAt would filter out all createdAt values from the colleciton
onSubmit	undefined	Called when the form is submitted, fired just before sending the request. If the method returns false, submit is canceled
onChange	undefined	Called every time the form data changes
onSuccess	undefined	Called when the form has been successfully submitted
onError	undefined	Called when an error is set, either manually or by a server response

Basic example

Use it directly in a component

import { Form } from 'use-inertia-form'
import { TextInput } from 'my/project/components/inputs'

const user = {
  user: {
    id: 1,
    firstName: "Jake",
    email: "jake@thetreehouse.ooo"
  }
}

const EditUserForm = ({ user }) => {
  return (
    <Form 
      model="user" 
      data={ { user } } 
      to={ `users/${user.id}` } 
      method="patch" 
      filter="user.id 
    >
      <TextInput name="firstName" label="First Name" />

      <TextInput name="email" label="Email" />
    </Form>
  )
}

Or create a proxy component to add custom styles, classes or defaults.

When using typescript, you'll need to extend NestedObject to satisfy the generic type definition.

import { Form as InertiaForm, type FormProps, type NestedObject } from 'use-inertia-form'

const MyForm = <TForm extends NestedObject>(
  { children, railsAttributes = true, className, ...props }: FormProps<TForm>,
) => {
  return (
    <div className="form-wrapper">
      <InertiaForm
        className={ `form ${className}` }
        railsAttributes={ railsAttributes }
        { ...props }
      >
        { children }
      </InertiaForm>
    </div>
  )
}

export default MyForm

Using this component, the type will be inferred from the value passed to data, there's no need to explicitly type it. That type inference will then give intellisense suggestions in the getter and setter methods.