Clever Geek Handbook

How do I perform default validation for radio buttons?

How do I set the switch if the initial value is true?

+10


source to share


4 answers


Using a property defaultChecked

available to <input type="checkbox">

and <input type="radio">

- https://reactjs.org/docs/uncontrolled-components.html#default-values



<input type="radio" name="radio-group" value="1" defaultChecked />
<input type="radio" name="radio-group" value="2" />
<input type="radio" name="radio-group" value="3" />
+17


source


Add an attribute checked

to your radio button eg. checked={field.input.value}

... [ JS Bin ]



+4


source


The idea here is to add defaultChecked and not the checked value.

+1


source


Sometimes the problem can be solved by removing the name attribute and using the conditionally checked value instead:

    <li>
      <label>
        <input
          type="radio"
          value="medium"
          checked={this.state.size === "medium"}
          onChange={this.handleChange}
        />
        Medium
      </label>
    </li>

    <li>
      <label>
        <input
          type="radio"
          value="large"
          checked={this.state.size === "large"}
          onChange={this.handleChange}
        />
        Large
      </label>
    </li>

Source here: https://magnusbenoni.com/radio-buttons-react/

0


source






More articles:


All Articles