javascripthtmlreactjsforms

Why does submitting a form in React 19 reset checkbox inputs but not text inputs?


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:

  1. Add some text to the text input
  2. Check the checkbox
  3. Click "Submit"

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?


Solution

  • 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