This is a quick example of how to implement a required checkbox field in React with the React Hook Form library. For a more detailed registration form example that includes a bunch of other fields see React - Form Validation Example with React Hook Form.
Here it is in action:
(See on StackBlitz at https://stackblitz.com/edit/react-hook-form-required-checkbox-example)
The app component contains an example form built with the React Hook Form library that contains a single required checkbox.
Form validation rules are defined with the Yup schema validation library and passed to the React Hook Form useForm()
function, for more info on Yup see https://github.com/jquense/yup.
The checkbox is set to required with the rule Yup.bool().oneOf([true], 'Accept Ts & Cs is required')
.
The useForm()
hook function returns an object with methods for working with a form including registering inputs, handling form submit, resetting the form, displaying errors and more, for a complete list see https://react-hook-form.com/api#useForm.
The onSubmit()
method is called when the form is valid and submitted, and simply displays the form data in a javascript alert.
The returned JSX template contains the form with the required checkbox field and validation message. The form field is registered with the React Hook Form using the ref={register}
attribute which registers the checkbox with its name
.
#react