formik-mui: CheckboxWithLabel returns empty array instead of true

Below is how I am implementing the checkbox.

                          <Field
                                Label={{label: 'Remember me'}}
                                checked={false}
                                onChange={() => console.log('checked')}
                                name="remember"
                                value="1"
                                color="primary"
                                component={CheckboxWithLabel}
                            />

When I check the box it returns empty array instead of boolean. This causes the error below:

Warning: Failed prop type: Invalid prop `checked` of type `array` supplied to `ForwardRef(Checkbox)`, expected `boolean`.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 22

Most upvoted comments

I’ve managed to get i work but couldn’t use formik-material-ui, here’s a hack while waiting for a fix:

import { Formik, Form, Field, ErrorMessage } from 'formik';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';

<Formik initialValues={{ switch: false }}>{form => (
    <Form className="form">
        <FormControlLabel
          control={<Field name="switch" component={Switch} />}
          label="My label"
          name="switch"
          required={true}
          onChange={(ev, checked) => { form.setFieldValue('terms', checked); }}
        />
        <ErrorMessage name="terms" />
    </Form>
)}</Formik>

Using onChange prop I can manually set the form state using the Formik context.

riderodd on Nov 15, 2019

For Switch (boolean behaviour i.e. not multiple), I managed to make it work in Formik 2 natively (without formik-material-ui), using <Field as> syntax. Extract:

import Switch from "@material-ui/core/Switch"
import FormControlLabel from "@material-ui/core/FormControlLabel"
import { Field, Form, Formik } from "formik"
...<Formik><Form>...
              <FormControlLabel
                control={
                  <Field
                    name="someBool"
                    id="someBool"
                    type="checkbox" // seems required to handle correctly initial values of true
                    as={Switch}
                  />
                }
                label="Some Boolean"
              />

using formik 2.0.6 and material-ui 4.6.1

r3mi on Nov 24, 2019

As @r3mi also said, its necessary the type="checkbox" prop on the Field for it to work, if not added, the changes in the checkbox status will not be correctly reflected in the Formik form values.

Example: https://codesandbox.io/s/material-demo-7zxgy

jdavidferreira on Feb 13, 2020

For Checkboxes with many options, I did this and it works for me. Without using formik-material-ui.

<FormControl component="fieldset">
  <FormLabel component="legend">Choose the ones you want</FormLabel>
  <FormGroup>
    {options.map(opt => (
      <FormControlLabel
        control={
          <Field
            name="my_options"
            value={opt.value}
            as={Checkbox}
          />
        }
        key={opt.value}
        label={opt.label}
      />
    ))}
  </FormGroup>
  <FormHelperText>Be careful</FormHelperText>
</FormControl>

"formik": "^2.1.4"

jdavidferreira on Feb 13, 2020

I’ve investigated a little and seems to be this issue related to Formik itself. When you use non-boolean value as the default for checkbox field it fails into an array

Demo: https://codesandbox.io/s/pedantic-tdd-el2df

Core issue somewhere there: https://github.com/jaredpalmer/formik/blob/master/packages/formik/src/Formik.tsx#L1155

If you use boolean initial value for checkbox it acts correctly 😎

SQReder on Jan 21, 2020

This bug is still happening. Any long term solution?

Thanks!

Amritpd on Jan 18, 2020