Search code examples
reactjsradio-button

setting defaultChecked in radio button is not working in react


I need to set the defaultChecked on page load which can later be changed by the user

<input
  ref={(element) => (this['input' + item.key] = element)}
  name={item.key}
  placeholder='Config value'
  defaultChecked={item.value === true}
  value='true'
  type='radio'
  onChange={(event) => this.validateCValue(event.target.value, item)}
/>
<label> True</label>

Solution

  • Radio inputs can only be checked but not unchecked, if you set it to true, the user will not be able to uncheck it, maybe you meant to use a checkbox?

    const [checked, setChecked] = useState(true);
      const handleChange = () => {
        setChecked(checked => !checked);
      };
    
      return (
        <div className="App">
          <input
            placeholder="Config value"
            defaultChecked={checked}
            type="checkbox"
            onChange={handleChange}
          />
          <label>{checked ? "checked" : "not checked"}</label>
        </div>
      );