I'm struggling to figure out why the validation isn't functioning as expected:
export default function Check() {
const label = { inputProps: { "aria-label": "termsOfService" } };
const formSchema = yup.object().shape({
termsOfService: yup
.boolean()
.oneOf([true], "Required.")
});
const formik = useFormik({
initialValues: {
termsOfService: false,
},
validationSchema: formSchema,
onSubmit: (values) => {
//logic
},
});
return (
<Checkbox
{...label}
name="termsOfService"
id="termsOfService"
onChange={formik.handleChange}
error={
formik.touched.termsOfService &&
Boolean(formik.errors.termsOfService)
}
value={formik.values.termsOfService}
helperText={formik.touched.termsOfService && formik.errors.termsOfService}
/>
}
The issue is that the "Required" error message is not displaying when the Checkbox is left unchecked. I've received the following error in my console:
"Warning: Received false for a non-boolean attribute error.
If you want to write it to the DOM, pass a string instead: error="false" or error={value.toString()}.
If you used to conditionally omit it with error={condition && value}, pass error={condition ? value : undefined} instead."
I've tried various adjustments like:
error={
formik.touched.termsOfService &&
Boolean(formik.errors.termsOfService)
}
But none of them have resolved the issue so far. Just to mention, I am working on Next.js. Interestingly, everything works fine when the Checkbox is checked..
Any insights on what might be causing this problem? Thank you!