\n\nThese docs are old and won’t be updated. Go to react.dev for the new React docs.
\nThese new documentation pages teach modern React and include live examples:
\n\n
\n- \n
<input>- \n
<select>- \n
<textarea>
In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
\nTo write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
\nFor example, this code accepts a single name in an uncontrolled component:
\nclass NameForm extends React.Component {\n constructor(props) {\n super(props);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.input = React.createRef(); }\n\n handleSubmit(event) {\n alert('A name was submitted: ' + this.input.current.value); event.preventDefault();\n }\n\n render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Name:\n <input type=\"text\" ref={this.input} /> </label>\n <input type=\"submit\" value=\"Submit\" />\n </form>\n );\n }\n}Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
\nIf it’s still not clear which type of component you should use for a particular situation, you might find this article on controlled versus uncontrolled inputs to be helpful.
\nIn the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value. Changing the value of defaultValue attribute after a component has mounted will not cause any update of the value in the DOM.
render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Name:\n <input\n defaultValue=\"Bob\" type=\"text\"\n ref={this.input} />\n </label>\n <input type=\"submit\" value=\"Submit\" />\n </form>\n );\n}Likewise, <input type=\"checkbox\"> and <input type=\"radio\"> support defaultChecked, and <select> and <textarea> supports defaultValue.
In HTML, an <input type=\"file\"> lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the File API.
<input type=\"file\" />In React, an <input type=\"file\" /> is always an uncontrolled component because its value can only be set by a user, and not programmatically.
You should use the File API to interact with the files. The following example shows how to create a ref to the DOM node to access file(s) in a submit handler:
\nclass FileInput extends React.Component {\n constructor(props) {\n super(props);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.fileInput = React.createRef(); }\n handleSubmit(event) {\n event.preventDefault();\n alert(\n `Selected file - ${this.fileInput.current.files[0].name}` );\n }\n\n render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Upload file:\n <input type=\"file\" ref={this.fileInput} /> </label>\n <br />\n <button type=\"submit\">Submit</button>\n </form>\n );\n }\n}\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root')\n);\nroot.render(<FileInput />);