how to add required attribute to checkbox in react?

Question

I added the attribute required in input type="checkbox"

   return (
     <form onSubmit={handleSubmit} action="/questions" method="post">
       <div>
         <label name="agreed">
           <input type="checkbox" required name="agreed" />
             I agree
         </label>
       </div>
     </form>
   );

But when you click on the submit form button an error appears

An invalid form control with name='agreed' is not focusable.

I would like to see a standard browser warning. Is it real?

Possible duplicate of [An invalid form control with name='' is not focusable](https://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable) — Anurag Srivastava, Jul 25 '19 at 10:01

score 0 · Answer 1 · answered Jul 25 '19 at 13:50

This works fine

import React, { Component } from "react";

class App extends Component {
  state = {};
  handleSubmit = e => {
    console.log("Trying to submit");
    e.preventDefault();
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit} action="/questions" method="post">
        <div>
          <label htmlFor="agreed">Accept </label>
          <input type="checkbox" required name="agreed" />I agree
        </div>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    );
  }
}

export default App;

@evans what do you mean by standard browser behaviour?? – Dinesh Kumar Jul 26 '19 at 05:24 — Dinesh Kumar, Jul 26 '19 at 05:24

how to add required attribute to checkbox in react?

1 Answers1