diff --git a/src/formiks/FormikCheckbox.tsx b/src/formiks/FormikCheckbox.tsx index 5bbac1f2a..71b677022 100644 --- a/src/formiks/FormikCheckbox.tsx +++ b/src/formiks/FormikCheckbox.tsx @@ -1,5 +1,5 @@ import { useField } from 'formik' -import { useMemo } from 'react' +import { useEffect, useMemo } from 'react' import { Checkbox } from '../fields/Checkbox' @@ -14,6 +14,17 @@ export function FormikCheckbox({ name, ...originalProps }: FormikCheckboxProps) // eslint-disable-next-line react-hooks/exhaustive-deps const isDefaultChecked = useMemo(() => Boolean(field.value), []) + // A checkbox must initialize its Formik value on mount: + // it wouldn't make sense to keep it as `undefined` since `undefined` means `false` in the case of a checkbox + useEffect( + () => { + helpers.setValue(isDefaultChecked) + }, + + // eslint-disable-next-line react-hooks/exhaustive-deps + [] + ) + return (