René's URL Explorer Experiment

Title: Uncontrolled Components – React

Open Graph Title: Uncontrolled Components – React

Open Graph Description: A JavaScript library for building user interfaces

Opengraph URL: https://legacy.reactjs.org/docs/uncontrolled-components.html

Generator: Gatsby 2.32.13

Domain: reactjs.org

None	IE=edge
apple-mobile-web-app-capable	yes
apple-mobile-web-app-title	React
og:type	article
og:image	https://legacy.reactjs.org/logo-og.png
fb:app_id	623268441017527
theme-color	#20232a

Links:

	https://surveys.savanta.com/survey/selfserve/21e3/210643?list=2
Take our 2021 Community Survey!	https://surveys.savanta.com/survey/selfserve/21e3/210643?list=2
Go to react.dev	https://react.dev/blog/2023/03/16/introducing-react-dev
React	https://reactjs.org/
Docs	https://reactjs.org/docs/getting-started.html
Tutorial	https://reactjs.org/tutorial/tutorial.html
Blog	https://reactjs.org/blog/
Community	https://reactjs.org/community/support.html
v18.2.0	https://reactjs.org/versions
Languages	https://reactjs.org/languages
GitHub	https://github.com/facebook/react/
react.dev	https://react.dev/
	https://react.dev/reference/react-dom/components/input
	https://react.dev/reference/react-dom/components/select
</td><td><a href='/?url=https://react.dev/reference/react-dom/components/textarea'>https://react.dev/reference/react-dom/components/textarea</a></td></tr> <tr><td>controlled components</td><td><a href='/?url=https://reactjs.org/docs/forms.html#controlled-components'>https://reactjs.org/docs/forms.html#controlled-components</a></td></tr> <tr><td>use a ref</td><td><a href='/?url=https://reactjs.org/docs/refs-and-the-dom.html'>https://reactjs.org/docs/refs-and-the-dom.html</a></td></tr> <tr><td>Try it on CodePen</td><td><a href='/?url=https://codepen.io/gaearon/pen/WooRWa?editors=0010'>https://codepen.io/gaearon/pen/WooRWa?editors=0010</a></td></tr> <tr><td>this article on controlled versus uncontrolled inputs</td><td><a href='/?url=https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/'>https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/</a></td></tr> <tr><td></td><td><a href='/?url=https://reactjs.org/docs/uncontrolled-components.html#default-values'>https://reactjs.org/docs/uncontrolled-components.html#default-values</a></td></tr> <tr><td></td><td><a href='/?url=https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag'>https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag</a></td></tr> <tr><td>File API</td><td><a href='/?url=https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications'>https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications</a></td></tr> <tr><td>ref to the DOM node</td><td><a href='/?url=https://reactjs.org/docs/refs-and-the-dom.html'>https://reactjs.org/docs/refs-and-the-dom.html</a></td></tr> <tr><td>Try it on CodePen</td><td><a href='/?url=https://reactjs.org/redirect-to-codepen/uncontrolled-components/input-type-file'>https://reactjs.org/redirect-to-codepen/uncontrolled-components/input-type-file</a></td></tr> <tr><td>Edit this page</td><td><a href='/?url=https://github.com/reactjs/reactjs.org/tree/main/content/docs/uncontrolled-components.md'>https://github.com/reactjs/reactjs.org/tree/main/content/docs/uncontrolled-components.md</a></td></tr> <tr><td>Getting Started</td><td><a href='/?url=https://reactjs.org/docs/getting-started.html'>https://reactjs.org/docs/getting-started.html</a></td></tr> <tr><td>Add React to a Website</td><td><a href='/?url=https://reactjs.org/docs/add-react-to-a-website.html'>https://reactjs.org/docs/add-react-to-a-website.html</a></td></tr> <tr><td>Create a New React App</td><td><a href='/?url=https://reactjs.org/docs/create-a-new-react-app.html'>https://reactjs.org/docs/create-a-new-react-app.html</a></td></tr> <tr><td>CDN Links</td><td><a href='/?url=https://reactjs.org/docs/cdn-links.html'>https://reactjs.org/docs/cdn-links.html</a></td></tr> <tr><td>Release Channels</td><td><a href='/?url=https://reactjs.org/docs/release-channels.html'>https://reactjs.org/docs/release-channels.html</a></td></tr> <tr><td>1. Hello World</td><td><a href='/?url=https://reactjs.org/docs/hello-world.html'>https://reactjs.org/docs/hello-world.html</a></td></tr> <tr><td>2. Introducing JSX</td><td><a href='/?url=https://reactjs.org/docs/introducing-jsx.html'>https://reactjs.org/docs/introducing-jsx.html</a></td></tr> <tr><td>3. Rendering Elements</td><td><a href='/?url=https://reactjs.org/docs/rendering-elements.html'>https://reactjs.org/docs/rendering-elements.html</a></td></tr> <tr><td>4. Components and Props</td><td><a href='/?url=https://reactjs.org/docs/components-and-props.html'>https://reactjs.org/docs/components-and-props.html</a></td></tr> <tr><td>5. State and Lifecycle</td><td><a href='/?url=https://reactjs.org/docs/state-and-lifecycle.html'>https://reactjs.org/docs/state-and-lifecycle.html</a></td></tr> <tr><td>6. Handling Events</td><td><a href='/?url=https://reactjs.org/docs/handling-events.html'>https://reactjs.org/docs/handling-events.html</a></td></tr> <tr><td>7. Conditional Rendering</td><td><a href='/?url=https://reactjs.org/docs/conditional-rendering.html'>https://reactjs.org/docs/conditional-rendering.html</a></td></tr> <tr><td>8. Lists and Keys</td><td><a href='/?url=https://reactjs.org/docs/lists-and-keys.html'>https://reactjs.org/docs/lists-and-keys.html</a></td></tr> <tr><td>9. Forms</td><td><a href='/?url=https://reactjs.org/docs/forms.html'>https://reactjs.org/docs/forms.html</a></td></tr> <tr><td>10. Lifting State Up</td><td><a href='/?url=https://reactjs.org/docs/lifting-state-up.html'>https://reactjs.org/docs/lifting-state-up.html</a></td></tr> <tr><td>11. Composition vs Inheritance</td><td><a href='/?url=https://reactjs.org/docs/composition-vs-inheritance.html'>https://reactjs.org/docs/composition-vs-inheritance.html</a></td></tr> <tr><td>12. Thinking In React</td><td><a href='/?url=https://reactjs.org/docs/thinking-in-react.html'>https://reactjs.org/docs/thinking-in-react.html</a></td></tr> <tr><td>Accessibility</td><td><a href='/?url=https://reactjs.org/docs/accessibility.html'>https://reactjs.org/docs/accessibility.html</a></td></tr> <tr><td>Code-Splitting</td><td><a href='/?url=https://reactjs.org/docs/code-splitting.html'>https://reactjs.org/docs/code-splitting.html</a></td></tr> <tr><td>Context</td><td><a href='/?url=https://reactjs.org/docs/context.html'>https://reactjs.org/docs/context.html</a></td></tr> <tr><td>Error Boundaries</td><td><a href='/?url=https://reactjs.org/docs/error-boundaries.html'>https://reactjs.org/docs/error-boundaries.html</a></td></tr> <tr><td>Forwarding Refs</td><td><a href='/?url=https://reactjs.org/docs/forwarding-refs.html'>https://reactjs.org/docs/forwarding-refs.html</a></td></tr> <tr><td>Fragments</td><td><a href='/?url=https://reactjs.org/docs/fragments.html'>https://reactjs.org/docs/fragments.html</a></td></tr> <tr><td>Higher-Order Components</td><td><a href='/?url=https://reactjs.org/docs/higher-order-components.html'>https://reactjs.org/docs/higher-order-components.html</a></td></tr> <tr><td>Integrating with Other Libraries</td><td><a href='/?url=https://reactjs.org/docs/integrating-with-other-libraries.html'>https://reactjs.org/docs/integrating-with-other-libraries.html</a></td></tr> <tr><td>JSX In Depth</td><td><a href='/?url=https://reactjs.org/docs/jsx-in-depth.html'>https://reactjs.org/docs/jsx-in-depth.html</a></td></tr> <tr><td>Optimizing Performance</td><td><a href='/?url=https://reactjs.org/docs/optimizing-performance.html'>https://reactjs.org/docs/optimizing-performance.html</a></td></tr> <tr><td>Portals</td><td><a href='/?url=https://reactjs.org/docs/portals.html'>https://reactjs.org/docs/portals.html</a></td></tr> <tr><td>Profiler</td><td><a href='/?url=https://reactjs.org/docs/profiler.html'>https://reactjs.org/docs/profiler.html</a></td></tr> <tr><td>React Without ES6</td><td><a href='/?url=https://reactjs.org/docs/react-without-es6.html'>https://reactjs.org/docs/react-without-es6.html</a></td></tr> <tr><td>React Without JSX</td><td><a href='/?url=https://reactjs.org/docs/react-without-jsx.html'>https://reactjs.org/docs/react-without-jsx.html</a></td></tr> <tr><td>Reconciliation</td><td><a href='/?url=https://reactjs.org/docs/reconciliation.html'>https://reactjs.org/docs/reconciliation.html</a></td></tr> <tr><td>Refs and the DOM</td><td><a href='/?url=https://reactjs.org/docs/refs-and-the-dom.html'>https://reactjs.org/docs/refs-and-the-dom.html</a></td></tr> <tr><td>Render Props</td><td><a href='/?url=https://reactjs.org/docs/render-props.html'>https://reactjs.org/docs/render-props.html</a></td></tr> <tr><td>Static Type Checking</td><td><a href='/?url=https://reactjs.org/docs/static-type-checking.html'>https://reactjs.org/docs/static-type-checking.html</a></td></tr> <tr><td>Strict Mode</td><td><a href='/?url=https://reactjs.org/docs/strict-mode.html'>https://reactjs.org/docs/strict-mode.html</a></td></tr> <tr><td>Typechecking With PropTypes</td><td><a href='/?url=https://reactjs.org/docs/typechecking-with-proptypes.html'>https://reactjs.org/docs/typechecking-with-proptypes.html</a></td></tr> <tr><td>Uncontrolled Components</td><td><a href='/?url=https://reactjs.org/docs/uncontrolled-components.html'>https://reactjs.org/docs/uncontrolled-components.html</a></td></tr> <tr><td>Web Components</td><td><a href='/?url=https://reactjs.org/docs/web-components.html'>https://reactjs.org/docs/web-components.html</a></td></tr> <tr><td>React</td><td><a href='/?url=https://reactjs.org/docs/react-api.html'>https://reactjs.org/docs/react-api.html</a></td></tr> <tr><td>React.Component</td><td><a href='/?url=https://reactjs.org/docs/react-component.html'>https://reactjs.org/docs/react-component.html</a></td></tr> <tr><td>ReactDOM</td><td><a href='/?url=https://reactjs.org/docs/react-dom.html'>https://reactjs.org/docs/react-dom.html</a></td></tr> <tr><td>ReactDOMClient</td><td><a href='/?url=https://reactjs.org/docs/react-dom-client.html'>https://reactjs.org/docs/react-dom-client.html</a></td></tr> <tr><td>ReactDOMServer</td><td><a href='/?url=https://reactjs.org/docs/react-dom-server.html'>https://reactjs.org/docs/react-dom-server.html</a></td></tr> <tr><td>DOM Elements</td><td><a href='/?url=https://reactjs.org/docs/dom-elements.html'>https://reactjs.org/docs/dom-elements.html</a></td></tr> <tr><td>SyntheticEvent</td><td><a href='/?url=https://reactjs.org/docs/events.html'>https://reactjs.org/docs/events.html</a></td></tr> <tr><td>Test Utilities</td><td><a href='/?url=https://reactjs.org/docs/test-utils.html'>https://reactjs.org/docs/test-utils.html</a></td></tr> <tr><td>Test Renderer</td><td><a href='/?url=https://reactjs.org/docs/test-renderer.html'>https://reactjs.org/docs/test-renderer.html</a></td></tr> <tr><td>JS Environment Requirements</td><td><a href='/?url=https://reactjs.org/docs/javascript-environment-requirements.html'>https://reactjs.org/docs/javascript-environment-requirements.html</a></td></tr> <tr><td>Glossary</td><td><a href='/?url=https://reactjs.org/docs/glossary.html'>https://reactjs.org/docs/glossary.html</a></td></tr> <tr><td>1. Introducing Hooks</td><td><a href='/?url=https://reactjs.org/docs/hooks-intro.html'>https://reactjs.org/docs/hooks-intro.html</a></td></tr> <tr><td>2. Hooks at a Glance</td><td><a href='/?url=https://reactjs.org/docs/hooks-overview.html'>https://reactjs.org/docs/hooks-overview.html</a></td></tr> <tr><td>3. Using the State Hook</td><td><a href='/?url=https://reactjs.org/docs/hooks-state.html'>https://reactjs.org/docs/hooks-state.html</a></td></tr> <tr><td>4. Using the Effect Hook</td><td><a href='/?url=https://reactjs.org/docs/hooks-effect.html'>https://reactjs.org/docs/hooks-effect.html</a></td></tr> <tr><td>5. Rules of Hooks</td><td><a href='/?url=https://reactjs.org/docs/hooks-rules.html'>https://reactjs.org/docs/hooks-rules.html</a></td></tr> <tr><td>6. Building Your Own Hooks</td><td><a href='/?url=https://reactjs.org/docs/hooks-custom.html'>https://reactjs.org/docs/hooks-custom.html</a></td></tr> <tr><td>7. Hooks API Reference</td><td><a href='/?url=https://reactjs.org/docs/hooks-reference.html'>https://reactjs.org/docs/hooks-reference.html</a></td></tr> <tr><td>8. Hooks FAQ</td><td><a href='/?url=https://reactjs.org/docs/hooks-faq.html'>https://reactjs.org/docs/hooks-faq.html</a></td></tr> <tr><td>Testing Overview</td><td><a href='/?url=https://reactjs.org/docs/testing.html'>https://reactjs.org/docs/testing.html</a></td></tr> <tr><td>Testing Recipes</td><td><a href='/?url=https://reactjs.org/docs/testing-recipes.html'>https://reactjs.org/docs/testing-recipes.html</a></td></tr> <tr><td>Testing Environments</td><td><a href='/?url=https://reactjs.org/docs/testing-environments.html'>https://reactjs.org/docs/testing-environments.html</a></td></tr> <tr><td>How to Contribute</td><td><a href='/?url=https://reactjs.org/docs/how-to-contribute.html'>https://reactjs.org/docs/how-to-contribute.html</a></td></tr> <tr><td>Codebase Overview</td><td><a href='/?url=https://reactjs.org/docs/codebase-overview.html'>https://reactjs.org/docs/codebase-overview.html</a></td></tr> <tr><td>Implementation Notes</td><td><a href='/?url=https://reactjs.org/docs/implementation-notes.html'>https://reactjs.org/docs/implementation-notes.html</a></td></tr> <tr><td>Design Principles</td><td><a href='/?url=https://reactjs.org/docs/design-principles.html'>https://reactjs.org/docs/design-principles.html</a></td></tr> <tr><td>AJAX and APIs</td><td><a href='/?url=https://reactjs.org/docs/faq-ajax.html'>https://reactjs.org/docs/faq-ajax.html</a></td></tr> <tr><td>Babel, JSX, and Build Steps</td><td><a href='/?url=https://reactjs.org/docs/faq-build.html'>https://reactjs.org/docs/faq-build.html</a></td></tr> <tr><td>Passing Functions to Components</td><td><a href='/?url=https://reactjs.org/docs/faq-functions.html'>https://reactjs.org/docs/faq-functions.html</a></td></tr> <tr><td>Component State</td><td><a href='/?url=https://reactjs.org/docs/faq-state.html'>https://reactjs.org/docs/faq-state.html</a></td></tr> <tr><td>Styling and CSS</td><td><a href='/?url=https://reactjs.org/docs/faq-styling.html'>https://reactjs.org/docs/faq-styling.html</a></td></tr> <tr><td>File Structure</td><td><a href='/?url=https://reactjs.org/docs/faq-structure.html'>https://reactjs.org/docs/faq-structure.html</a></td></tr> <tr><td>Versioning Policy</td><td><a href='/?url=https://reactjs.org/docs/faq-versioning.html'>https://reactjs.org/docs/faq-versioning.html</a></td></tr> <tr><td>Virtual DOM and Internals</td><td><a href='/?url=https://reactjs.org/docs/faq-internals.html'>https://reactjs.org/docs/faq-internals.html</a></td></tr> <tr><td>Installation</td><td><a href='/?url=https://reactjs.org/docs/getting-started.html'>https://reactjs.org/docs/getting-started.html</a></td></tr> <tr><td>Main Concepts</td><td><a href='/?url=https://reactjs.org/docs/hello-world.html'>https://reactjs.org/docs/hello-world.html</a></td></tr> <tr><td>Advanced Guides</td><td><a href='/?url=https://reactjs.org/docs/accessibility.html'>https://reactjs.org/docs/accessibility.html</a></td></tr> <tr><td>API Reference</td><td><a href='/?url=https://reactjs.org/docs/react-api.html'>https://reactjs.org/docs/react-api.html</a></td></tr> <tr><td>Hooks</td><td><a href='/?url=https://reactjs.org/docs/hooks-intro.html'>https://reactjs.org/docs/hooks-intro.html</a></td></tr> <tr><td>Testing</td><td><a href='/?url=https://reactjs.org/docs/testing.html'>https://reactjs.org/docs/testing.html</a></td></tr> <tr><td>Contributing</td><td><a href='/?url=https://reactjs.org/docs/how-to-contribute.html'>https://reactjs.org/docs/how-to-contribute.html</a></td></tr> <tr><td>FAQ</td><td><a href='/?url=https://reactjs.org/docs/faq-ajax.html'>https://reactjs.org/docs/faq-ajax.html</a></td></tr> <tr><td>GitHub</td><td><a href='/?url=https://github.com/facebook/react'>https://github.com/facebook/react</a></td></tr> <tr><td>Stack Overflow</td><td><a href='/?url=https://stackoverflow.com/questions/tagged/reactjs'>https://stackoverflow.com/questions/tagged/reactjs</a></td></tr> <tr><td>Discussion Forums</td><td><a href='/?url=https://reactjs.org/community/support.html#popular-discussion-forums'>https://reactjs.org/community/support.html#popular-discussion-forums</a></td></tr> <tr><td>Reactiflux Chat</td><td><a href='/?url=https://discord.gg/reactiflux'>https://discord.gg/reactiflux</a></td></tr> <tr><td>DEV Community</td><td><a href='/?url=https://dev.to/t/react'>https://dev.to/t/react</a></td></tr> <tr><td>Facebook</td><td><a href='/?url=https://www.facebook.com/react'>https://www.facebook.com/react</a></td></tr> <tr><td>Twitter</td><td><a href='/?url=https://twitter.com/reactjs'>https://twitter.com/reactjs</a></td></tr> <tr><td>Code of Conduct</td><td><a href='/?url=https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md'>https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md</a></td></tr> <tr><td>Community Resources</td><td><a href='/?url=https://reactjs.org/community/support.html'>https://reactjs.org/community/support.html</a></td></tr> <tr><td>Tutorial</td><td><a href='/?url=https://reactjs.org/tutorial/tutorial.html'>https://reactjs.org/tutorial/tutorial.html</a></td></tr> <tr><td>Blog</td><td><a href='/?url=https://reactjs.org/blog'>https://reactjs.org/blog</a></td></tr> <tr><td>Acknowledgements</td><td><a href='/?url=https://reactjs.org/acknowledgements.html'>https://reactjs.org/acknowledgements.html</a></td></tr> <tr><td>React Native</td><td><a href='/?url=https://reactnative.dev/'>https://reactnative.dev/</a></td></tr> <tr><td>Privacy</td><td><a href='/?url=https://opensource.facebook.com/legal/privacy'>https://opensource.facebook.com/legal/privacy</a></td></tr> <tr><td>Terms</td><td><a href='/?url=https://opensource.facebook.com/legal/terms'>https://opensource.facebook.com/legal/terms</a></td></tr> <tr><td></td><td><a href='/?url=https://opensource.facebook.com/projects/'>https://opensource.facebook.com/projects/</a></td></tr> </table> <p>Viewport: width=device-width, initial-scale=1.0 <hr> URLs of <a href='/known-crawlers'>crawlers that visited me</a>.