React + Formik - Required Checkbox Example
Example built with React 16.12 and Formik 2.1.4
Other versions available:
- React: React Hook Form
- Angular: Reactive Forms, Template-Driven Forms
- Vue 3: VeeValidate
This is a quick example of how to implement a required checkbox field in React with Formik using the Yup object schema validator.
Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/react-formik-required-checkbox)
React + Formik Required Checkbox App Component
The app component contains an example form built with Formik that contains a single "Accept Terms & Conditions" checkbox field that is required.
The checkbox is set to required with the schema rule acceptTerms: Yup.bool().oneOf([true], 'Accept Terms & Conditions is required') and by setting the initial value acceptTerms: false inside initialValues.
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], 'Accept Terms & Conditions is required')
})}
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">Accept Terms & Conditions</label>
<ErrorMessage name="acceptTerms" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary mr-2">Submit</button>
<button type="reset" className="btn btn-secondary">Reset</button>
</div>
</Form>
)}
</Formik>
)
}
}
export { App }; For a more detailed Formik validation example that includes a registration form with this required checkbox as well as a bunch of other fields see React + Formik 2 - Form Validation Example.
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/c/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on GitHub at https://github.com/cornflourblue
- Feeds formats available: RSS, Atom, JSON