React: “I agree to terms” checkbox example

Updated: February 13, 2023 By: A Goodman 5 comments

Terms of service (aka TOS) are the legal agreements between a website or an app and a person who wants to use that service. Usually, before a user registers an account, there will be a checkbox asking them to agree before they can continue. The example below shows you how to do so in React with the useState hook.

The Example

App Preview

The simple React project we are going to build contains a checkbox and a button:

  • If the checkbox is unchecked, the button will be disabled and can not be clicked.
  • If the checkbox is checked, the button will be enabled.

Here’s what you’ll see when running the final project:

The Code

1. Initialize a new React project:

npx create-react-app kindacode_example

2. Replace the default code in the App.js with the following:

import React, { useState } from 'react';

import './App.css';

const App = () => {
  const [agree, setAgree] = useState(false);

  const checkboxHandler = () => {
    // if agree === true, it will be set to false
    // if agree === false, it will be set to true
    // Don't miss the exclamation mark

  // When the button is clicked
  const btnHandler = () => {
    alert('The buttion is clickable!');

  return (
    <div className="App">
      <div className="container">
          <input type="checkbox" id="agree" onChange={checkboxHandler} />
          <label htmlFor="agree"> I agree to <b>terms and conditions</b></label>

        {/* Don't miss the exclamation mark* */}
        <button disabled={!agree} className="btn" onClick={btnHandler}>

export default App;

3. And here is the App.css:

* {
  margin: 0;
  padding: 0;

.App {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

.container {
  width: 800;
  height: 300;
  margin: 100px auto;

.btn {
  margin-top: 20px;
  padding: 10px 30px;
  cursor: pointer;


We’ve walked through a complete example of implementing an “I agree to terms” checkbox. If you’d like to explore more new and interesting things about modern React development, take a look at the following articles:

You can also check our React category page and React Native category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments
1 year ago

Great but how we do if you have two or more checkboxes and all off them need to be checked ?

2 years ago

Nice and concise article. Keep it up man

2 years ago

Excellent, it helped me a lot !!

Related Articles