title: Formik handle checkbox validation with React and Material UI
body: <p>I'm trying to handle the Checkbox validation for an &quot;Accept Terms of Service&quot; checkbox with React and Material UI.</p>
  <p>So far I did this:</p>
  <p>Validation Schema</p>
  <pre class="lang-js prettyprint-override"><code>const validationSchema = yup.object().shape({
    email: yup
      .string()
      .email('Enter a valid email address')
      .required('Email address is required'),
    password: yup
      .string()
      .min(8, 'Password should be of minimum 8 characters')
      .required(),
    termsOfService: yup
      .boolean()
      .required('You must accept the Terms of Service to proceed')
      .oneOf([true], 'Error')
  })
  </code></pre>
  <p>Form Component</p>
  <pre class="lang-js prettyprint-override"><code>const formik = useFormik({
      initialValues: {
        email: '',
        password: '',
        termsOfService: false
      },
      validationSchema,
      onSubmit: async values =&gt; {
        alert(JSON.stringify(values, null, 2))
      }
    })
  </code></pre>
  <p>Form Component JSX</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Box
        component=&quot;form&quot;
        noValidate
        onSubmit={formik.handleSubmit}
        sx={{ mt: 1 }}
      &gt;
        &lt;TextField
          autoFocus
          margin=&quot;normal&quot;
          required
          fullWidth
          id=&quot;email&quot;
          label={t('email_address')}
          name=&quot;email&quot;
          autoComplete=&quot;email&quot;
          value={formik.values.email}
          onChange={formik.handleChange}
          error={formik.touched.email &amp;&amp; Boolean(formik.errors.email)}
          helperText={formik.touched.email &amp;&amp; formik.errors.email}
        /&gt;
        &lt;TextField
          margin=&quot;normal&quot;
          required
          fullWidth
          name=&quot;password&quot;
          label={t('password')}
          type=&quot;password&quot;
          id=&quot;password&quot;
          autoComplete=&quot;current-password&quot;
          value={formik.values.password}
          onChange={formik.handleChange}
          error={formik.touched.password &amp;&amp; Boolean(formik.errors.password)}
          helperText={formik.touched.password &amp;&amp; formik.errors.password}
        /&gt;
        &lt;FormControlLabel
          control={&lt;Checkbox value=&quot;terms-of-service&quot; color=&quot;primary&quot; /&gt;}
          label={t('terms_of_service')}
        /&gt;
        &lt;Button type=&quot;submit&quot; fullWidth variant=&quot;contained&quot; sx={{ mt: 3, mb: 2 }}&gt;
          {t('sign_up_button')}
        &lt;/Button&gt;
      &lt;/Box&gt;
  </code></pre>
  <p>How to do that, in the same way, I managed the validation on the text inputs?</p>