Uncontrolled form
An uncontrolled form is a React form whose input values are managed primarily by the DOM rather than by React state or properties.
React Quickly, Second Edition
An uncontrolled input component is a form input whose current value is managed by the browser rather than controlled by React state or properties.
- How it is used
- Handles form values in the DOM when React needs to read them chiefly on submission.
- How deep it goes
- Works through initial values and submit handlers, then compares state and DOM ownership without exploring browser internals.
- Examples
- Uses a natural-number sum calculator and an address form that gathers input values for a POST request.
- What you can do after
- Build it from scratch using defaultValue and named inputs, then retrieve their DOM values in a submit handler.
Read how React Quickly, Second Edition explains uncontrolled form →
React Hooks in Action: With Suspense and Concurrent Mode
An uncontrolled component is a React component whose state is read from and managed through the DOM rather than being fully held in React state.
- How it is used
- Uses DOM-managed input state for form fields read only when an action, such as submitting or dispatching, requires the value.
- How deep it goes
- Explains ref-based access and contrasts it with controlled state, stopping short of broader form validation or submission patterns.
- Examples
- Demonstrates a WeekPicker text box whose date value is read through a ref when the user clicks Go.
- What you can do after
- Apply it via useRef to read a DOM input value without triggering re-renders for each typed character.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains uncontrolled form →
Related concepts
- controlled formcontrasts with · A controlled form is a React form whose input values are stored in and updated through React-managed state.
- file inputused by · A file input is a form control that lets a user select files from the local device for submission or processing.
- Document Object Modeluses · The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
- default valueuses · A default value is a predefined or automatically supplied value used when an expected input, argument, field, or configuration setting is omitted or unspecified.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.