formik: Field's value for checkboxes and radios is not being read properly

🐛 Bug report

Current Behavior

Field’s value for checkboxes and radios is not being read properly.

Expected behavior

Values for checkboxes and radios should be read from Formik state and not from props.

Reproducible example

https://codesandbox.io/s/r1r6x1wp94

Suggested solution(s)

I think the problem lies here: https://github.com/jaredpalmer/formik/blob/master/src/Field.tsx#L155-L158

I believe that by changing:

      value:
        props.type === 'radio' || props.type === 'checkbox'
          ? props.value // React uses checked={} for these inputs
          : getIn(formik.values, name),

To:

     [props.type === 'radio' || props.type === 'checkbox' ? "checked" : "value"]:
       getIn(formik.values, name),

The issue would be resolved.

Your environment

Software Version(s)
Formik 1.4.2
React 16.7.0

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 10
  • Comments: 17 (1 by maintainers)

Most upvoted comments

This is still a problem…

This has been fixed in v2.

@smithcoin I believe this is the minimum working example for radio buttons: https://codesandbox.io/s/88jqoy4qvl

This is the only solution that worked for me after 4 hours of banging my head

@smithcoin I believe this is the minimum working example for radio buttons: https://codesandbox.io/s/88jqoy4qvl

@jaredpalmer We’re using v2.0.1-rc.5 and it seems like we still have this issue. Basically the same setup as in @hnordt’s codesandbox, except we’re using useField() instead of <Field>. Not sure if we’re doing anything wrong, but other types of inputs work just fine.

@jaredpalmer when is v2 going to be released?