2.4 Submit component

The Form component already intercepts the form.submit event, so any submit button will submit the form. This component provides some standard features which are commonly included in a form submit button.

• Disabled while processing to avoid multiple submits
• Accepts a list of data paths in the requiredFields prop to disable the button unless those fields are not empty
• Customize the element using the component prop. Accepts either a string or a React element.

Prop	Description
requiredFields	An array of dot-notation strings. Any empty values in the data object at these locations will cause the submit button to be disabled
component	String or React component to use as the root element for the submit button. Defaut is a standard HTML button.

An example of customizing the submit button using Mantine:

import React, { forwardRef } from 'react'
import { Button, ButtonProps } from '@mantine/core'
import { Submit as SubmitButton, useForm } from 'use-inertia-form'

const Submit = forwardRef<HTMLButtonElement, ButtonProps>((
  { children, disabled, ...props },
  ref,
) => {
  const { isDirty } = useForm()

  return (
      <SubmitButton
        component={ Button }
        ref={ ref }
        disabled={ disabled || !isDirty }
        requiredFields={ ['user.firstName'] }
        { ...props }
      >
        { children }
      </SubmitButton>
  )
})

export default Submit