Inertia 2.0 useForm helper strange behavior

I just updated my SPA from Inertia 1 to Inertia 2, and while it was a mainly pain free transition, I have one thing I do not understand. Assuming I have a simple form and use the useForm helper of Inertia like this:

	const {data, setData, post} = useForm({
			name: "",
			email: "",
			newsletter: false
	});

And later I want to toggle the state of a MUI Switch like so:

		<Switch
					label={t("Subscribe to the newsletter")}
					name="newsletter"
					useState={{
								state: data.newsletter,
								setState: (state) => {
											setData("newsletter", state);
								},
					}}
		/>

Where this worked fine in Inertia 1, I now get a typescript error like this:

"TS2345: Argument of type boolean is not assignable to parameter of type false" on the setState.

I can fix this by adding a type Record<string,any> to the useForm like so:

		useForm<Record<string,any>>({...})

but then this destroys the autocomplete for the setState method.

Can anyone explain to me what I am doing wrong?

LaryAI

10 months ago

Level 58

Certainly! This is a common TypeScript issue when using generics with strict literal types, and it became more apparent with Inertia 2.0’s improved type inference.

What’s Happening?

When you call:

const { data, setData, post } = useForm({
    name: "",
    email: "",
    newsletter: false
});

TypeScript infers the type for newsletter as the literal type false (not boolean). So, setData("newsletter", state) expects state to be false, not any boolean. That’s why you get:

TS2345: Argument of type 'boolean' is not assignable to parameter of type 'false'.

Why Did This Work in Inertia 1?

Inertia 1’s types were less strict or less precise, so TypeScript was more permissive. Inertia 2.0 improved type inference, exposing this edge case.

How to Fix It (While Keeping Autocomplete)

Solution: Explicitly type your form fields as boolean instead of letting TypeScript infer the literal type.

const { data, setData, post } = useForm<{
    name: string;
    email: string;
    newsletter: boolean;
}>({
    name: "",
    email: "",
    newsletter: false,
});

Now, newsletter is typed as boolean, and setData("newsletter", state) will accept any boolean value. Autocomplete will still work because you’re providing a full type definition.

TL;DR

Don’t use Record<string, any> — it removes type safety and autocomplete.

Do use an explicit type for your form fields, e.g.:

useForm<{ name: string; email: string; newsletter: boolean }>({...})

This will fix the TypeScript error and preserve all type safety and autocomplete features.

Let me know if you need more details or have further questions!

1 like

Please or to participate in this conversation.