Use a check box for a yes-or-no choice, such as whether a task is urgent. In a React form, its changing state is `checked`, not `value`: `value` identifies what the input signifies, while `checked` tells you whether it is selected. section 9.2.5
Store an urgent-task flag
Initialize form state with `isUrgent: false`. Render `<input type="checkbox" checked={data.isUrgent} onChange={onChangeUrgent} />`. In the handler, update the flag from `evt.target.checked`, preserving the other fields: `setData(oldData => ({ ...oldData, isUrgent: evt.target.checked }))`. Read `evt.target.checked` rather than `evt.target.value` when the user toggles the box. section 9.2.5 section 9.4
Check boxes also suit independently completable task steps. Place one beside each step to mark it complete or incomplete; a progress bar can then show the ratio of completed steps, even while the step list is hidden. section 13.3
Listing 9.10 The form component with a check box (excerpt)
import { useState } from "react";
function Add({ handleAdd, handleCancel }) {
const [data, setData] = useState({ title: "", isUrgent: false });
const onChangeTitle = (evt) => #1
setData((oldData) => #1
({ ...oldData, title: evt.target.value })); #1
const onChangeUrgent = (evt) => #2
setData((oldData) => #2
({ ...oldData, isUrgent: evt.target.checked })); #2
...
<label>
Title:
<input
value={data.title} #3
onChange={onChangeTitle} #3
/>
</label>
<label>
<input
type="checkbox"
checked={data.isUrgent} #4
onChange={onChangeUrgent} #4
/>
Urgent?
</label>
...
The form excerpt pairs a text field’s `value` with a check box’s `checked` and shows the state-update handler for each. section 9.2.5
