CheckboxWithLabel- Yup

Hi, The label does not appear, nor the error message … I need help please please

import React from 'react'
import { Formik, Field, Form } from 'formik'
import { TextField, CheckboxWithLabel } from 'formik-material-ui'
import * as Yup from 'yup'

const SignupForm = () => {
  return (
<Formik
      initialValues={{ accept: false }}
      validationSchema={Yup.object({
        accept: Yup.boolean()
          .required('Requis')
          .oneOf([true], "Error")
      })}

<Form>
        <Field
          name='accept'
          label='condition'
          type='checkbox'
          component={CheckboxWithLabel}
        />
</Form>
</Formik>
  )
}

export default SignupForm

[wichert]

I ended up doing this:

const tosError = formikBag.getFieldMeta('acceptTos').error

return (
  <Field
    component={CheckboxWithLabel}
    type="checkbox"
    name="acceptTos"
    Label={{ label: "I accept the terms and conditions" }}
    color="primary"
  />
  {tosError ? <FormHelperText error>{tosError}</FormHelperText>:null}
)

[mjdeale]

@vegtelenseg @Jippay @cliedeman:

The solution above is NOT using the CheckboxWithLabel code to put the label up. It is simply wrapping a label around a CheckboxWithLabel that failed to put a label up, using the FormControlLabel functionality.

I believe the confusion is caused because the sample code in the API documentation is wrong. It shows:

<CheckboxWithLabel name="checked" label="Checkbox" />

^^^^^ which doesn’t work.

What does work is:

<CheckboxWithLabel name="checked" Label={{ label: "Checkbox" }} />

I am not sure if the right thing to do is to change the CheckboxWithLabel component, or the documentation, but clearly changing the documentation would clear up the confusion that exists right now.

– M