Problem with types with <Form> in Inertia, React and TypeScript

Question

I'm following the documentation (https://inertiajs.com/forms) of Inertia for custom submit button using the <Form ...> component.

It show as example:

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>
    </>
  )
}

But I need a type for formRef, because the line formRef.current.submit() is warning in TS.

I try with HTMLFormElement but still showing errors.

What are the corrects types here?

I expect to TS don't show errors in my IDE.

I tried const formRef = useRef<HTMLFormElement | null>(null);

Thanks

Does it not tell you what type it expects? What does the warning say? Are there also errors? What do those say? — Thomas
– Thomas, Commented Aug 18 at 19:39
@Thomas Type 'RefObject<HTMLFormElement | null>' is not assignable to type 'Ref<FormComponentSlotProps> | undefined'... but FormComponentSlotProps doesn't exists. So I try to change it but always I got a new error — carlos
– carlos, Commented Aug 18 at 19:43

carlos · Accepted Answer · 2025-08-18 19:46:16Z

1

I found a solution. You need import then add the type.

import { FormComponentRef } from '@inertiajs/core';

const formRef = useRef<FormComponentRef>(null);

Thanks for all

answered Aug 18 at 19:46

carlos

3003 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem with types with <Form> in Inertia, React and TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related