Checkbox behavior changed in react 19 when not providing initial values

[mmussmann]

Bug report

Current Behavior

After updating to React 19 creating a form with a checkbox and not providing initial values will cause the checkbox to go into multi mode and change from using true/false values to using ['on']/[] as values.

Current result on submit: [{"myCheckbox":["on"]},{}]

Expected behavior

Using same code with React 18.3.1 the result is this: [{"myCheckbox":true},{}]

Reproducible example

How to reproduce in examples:

1. Click checkbox
2. Click submit
3. Inspect resulting alert

Example with React 19: https://codesandbox.io/p/sandbox/formik-checkbox-bug-reproduction-96p8gs
Example with React 18: https://codesandbox.io/p/sandbox/yc6ss2

Suggested solution(s)

I have not looked into the Formik code so I don't have a suggestion for a code fix.

Additional context

N/A

Your environment

Check code sandbox examples

[cadonau]

As @mmussmann beat me to it, I’m just going to add the issue I intended to raise (see below) as a comment here. Perhaps the workaround works for others as well.

---

Checkbox Behavior Change with React v19

Bug report

When the initial value is undefined using a field with type checkbox (through useField), the field’s behavior is unexpectedly different with React v19.

Reproducible Example

See https://codesandbox.io/p/sandbox/formik-codesandbox-template-forked-wgvf47:

import React from "react";
import { createRoot } from "react-dom/client";
import { Formik, useField } from "formik";

import { DisplayFormikState } from "./helper";
import "./style.css";

const FormikCheckbox = ({ name }) => {
  const [field, meta, helper] = useField({
    name,
    type: "checkbox",
  });
  return (
    <>
      <input id={name} type="checkbox" {...field} />
      <label htmlFor={name}>{name}</label>
    </>
  );
};

const App = () => (
  <div className="app">
    <Formik initialValues={{ "my-checkbox": undefined }} onSubmit={() => {}}>
      {(props) => {
        return (
          <form onSubmit={props.handleSubmit}>
            <h1>FormikCheckbox</h1>
            <div>
              <FormikCheckbox name="my-checkbox" />
            </div>
            <button type="submit">Submit</button>

            <DisplayFormikState {...props} />
          </form>
        );
      }}
    </Formik>
  </div>
);

const rootDomNode = document.getElementById("root");
const root = createRoot(rootDomNode);
root.render(<App />);

React v19 Behavior

Initial state (unchecked checkbox):

"values": {}

Checked checkbox:

"values": {
    "my-checkbox": ["on"]
}

Uncheck attempt (visually still checked):

"values": {
    "my-checkbox": []
}

Bug: field.checked is still true! No change with subsequent attempts.

React v18 Behavior

Initial state (unchecked checkbox):

"values": {}

Checked checkbox:

"values": {
    "my-checkbox": true
}

Unchecked checkbox:

"values": {
    "my-checkbox": false
}

(field.checked is false)

Workaround

For now, instead of using field’s onChange setting the <input> element’s onChange explicitly using setValue of useField’s helpers can work:

      <input id={name} type="checkbox" {...field}
        onChange={(event) => helper.setValue(event.target.checked)}
      />

Environment

Software	Version(s)
Formik	2.4.6
React	19.0.0
TypeScript	5.7.3
Browser	Various
npm/Yarn	Yarn 4.5.3