Formik: Field type="checkbox", recommended way?

[gabor]

Bug, Feature, or Question?

Question

the question

when using a <Field component="input" type="checkbox"> component to represent a checkbox, it seems i have to manually maintain the checked attribute, like this:

<Field name="f1" component="input" type="checkbox" checked={props.values.f1} />

is this the recommended approach?
i am just unsure, because the value attribute is maintained automatically, unlike checked.

[Andreyco]

Depends on your use case, of course...
This is my approach https://codesandbox.io/s/328038x19q

[c10b10]

What about using a FieldArray for this purpose?

[huylift]

Can anyone give a simpler answer to the original question?

@Andreyco 's example is more complex: it supports an array of checkboxes.

[ameenaliu]

I believed it is maintained automatically like value. I tried with a simple use case like @Andreyco and it works; here - https://codesandbox.io/s/sleepy-shannon-lpe81.

[mikemclin]

It is (mostly) maintained automatically. You still have to manage the checked state from the initial values. Here is a fork of @ameenaliu code sandbox: https://codesandbox.io/s/ecstatic-monad-58kjq

[dennisat]

I couldn't believe that the checkbox would be so hard working with Formik.

Anyway, I found a very simple way to work with it.

_This is the MUI checkbox but I think with will work for native input checkbox as well._

                    <Checkbox
                      name="autoLogin"
                      value="true"
                      checked={autoLogin}
                    />

The autoLogin is a boolean variable.
The value surprisingly should be hardcoded as a string "true".

[pelupotter]

Hello, I leave you an example of Checkbox with SUIR, greetings!

<Field name='external' label='Client is External?' component={Checkbox} checked={values.external} onChange={() => setFieldValue('external', !values.external)} />