React - Required Checkbox Example with React Hook Form

React - Required Checkbox Example with React Hook Form

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.

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)

React Hook Form Required Checkbox App Component

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Share Code Between React Native and React JS

React provides support for the server-side and frontend. Today, React development services are in demand as more and more organizations are considering software solutions that are crafted from the framework.

Validating React Forms With React-Hook-Form

In this article we will learn how to Validating React Forms With React-Hook-Form . Validating inputs is very often required. For example, when you want to make sure two passwords inputs are the same, an email input should in fact be an email or that the input is not too long

How React Hooks can replace React Router

Looking to learn more about hookrouter and how it works? Follow along with this tutorial to learn more.