It appears that when a callback is supplied to a form's action
prop and the form is submitted, checkbox inputs get reset while text inputs do not.
Consider the following example:
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client'
function App() {
const [value, setValue] = useState('')
const [checked, setChecked] = useState(false)
return <form action={() => {}}>
<input
type="text"
value={value}
onChange={({ target }) => setValue(target.value)}
/>
<input
type="checkbox"
checked={checked}
onChange={({ target }) => setChecked(target.checked)}
/>
<button>Submit</button>
</form>
}
createRoot(document.getElementById('root')).render(<App />)
You can see a live example here.
To replicate the issue, perform the following steps:
Once you submit the form, the text input will have retained its value while the checkbox input will have been unchecked. No network requests are made.
What's going on here?
This is an open bug (#31695) for React 19.
While it is documented that uncontrolled inputs will be reset on form submission, a checkbox here is also showing the same behaviour. This is unintended and might be fixed in the future.
A similar issue (#30580) exists for select components