اینکار با استفاده از formik بصورت زیر انجام می شود:

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

class App extends React.Component {
    render() {
        return (
            <Formik
                initialValues={{
                    acceptTerms: false
                }}
                validationSchema={Yup.object().shape({
                    acceptTerms: Yup.bool().oneOf([true], 'قوانین سایت می بایست پذیرفته گردد')
                })}
                onSubmit={fields => {
                    alert('SUCCESS!! :-)\n\n' + JSON.stringify(fields, null, 4))
                }}
            >
                {({ errors, status, touched }) => (
                    <Form>
                        <div className="form-group form-check">
                            <Field type="checkbox" name="acceptTerms" className={'form-check-input ' + (errors.acceptTerms && touched.acceptTerms ? ' is-invalid' : '')} />
                            <label htmlFor="acceptTerms" className="form-check-label">قوانین سایت را می پذیرم</label>
                            <ErrorMessage name="acceptTerms" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <button type="submit" className="btn btn-primary mr-2">خرید</button>
                           
                        </div>
                    </Form>
                )}
            </Formik>
        )
    }
}

export { App }; 

در اینجا، متغیر acceptTerms را چک می کنیم.اگر false باشد، به کاربر پیغام می دهد که چک باکس باید تیک بخورد. اینکار با استفاده از کد ( 'قوانین سایت می بایست پذیرفته گردد',[true])acceptTerms: Yup.bool().oneOf انجام می شود.

این متغیر در ابتدا با false مقدار دهی می شود، چون میخواهیم هنگامی که کاربر تیک قبول قوانین را زد، true شود.