Controlled vs. Uncontrolled Input
A controlled field takes its value from React state; an uncontrolled field keeps its own value in the DOM until you read it.
See it
What it is
A controlled input gets its current value from React state through value or checked, and reports edits through onChange. An uncontrolled input keeps its current value in the DOM; React supplies only an initial defaultValue or defaultChecked, and code reads the result later with FormData or a ref.
Use a controlled field when each keystroke drives validation, formatting, conditional UI, or another component. Use an uncontrolled field for a simple submit-and-read form or when integrating a non-React widget that already owns the element. Neither is inherently more correct; choose one owner for the field's lifetime. The split shows up in libraries too: Formik built its API on controlled fields, while React Hook Form leans on uncontrolled ones and refs.
Gotcha: value without an onChange handler makes a text input read-only. Do not switch between controlled and uncontrolled after mount, and do not let a controlled value become undefined or null. Initialize text state to an empty string and checkbox state to a boolean.
Ask AI for it
Refactor this React form so every field has one explicit owner. For a field that drives live validation, use a controlled input with value and onChange, initialize text state to '', and never pass null or undefined as its value. For fields read only on submit, use defaultValue or defaultChecked and collect them with the browser FormData API. Do not mix value with defaultValue or switch ownership after mount. List each field and whether React state or the DOM owns its current value.