For checkboxes and radio buttons, the changing state is whether the control is selected, not its value. React represents that state with the boolean checked property. section 9.2.5
Store checkbox state in React
Keep the checkbox controlled by storing a Boolean in state and passing it to checked. Read the new Boolean from evt.target.checked in onChange: const [data, setData] = useState({ title: "", isUrgent: false }); const onChangeUrgent = (evt) => setData((oldData) => ({ ...oldData, isUrgent: evt.target.checked })); <input type="checkbox" checked={data.isUrgent} onChange={onChangeUrgent} /> The title uses evt.target.value, while the checkbox uses evt.target.checked. section 9.4 section 9.5
