Skip to content

[React 19] Controlled checkboxes are reset by form submission and form.reset()Β #31695

@jeremy-deutsch

Description

@jeremy-deutsch

Summary

After a form is submitted with an action, if one of the form's fields is a checkbox or radio input controlled by its checked prop, that element is reset as if it were uncontrolled. The same happens when the reset() method is called on the form. (Expected behavior: those fields are not reset.)

import { useState } from "react"

export default function Page() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <form action={() => {
      console.log("hello world!");
    }}>
      <label>
        Some checkbox
        <input type="checkbox"
          checked={isChecked}
          onChange={(e) => {
            setIsChecked(e.target.checked);
          }}
        />
      </label>
      <button>Submit form</button>
    </form>
  );
}

Repro: https://codesandbox.io/p/sandbox/checkbox-reset-repro-sff3sr

Related: #30580, reactjs/react.dev#7340

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions