Codecademy Logo

React Forms

Controlled vs. Uncontrolled Form Fields

In React, form fields are considered either uncontrolled, meaning they maintain their own state, or controlled, meaning that some parent maintains their state and passes it to them to display. Usually, the form fields will be controlled.

The example code shows an uncontrolled and controlled input.

const uncontrolledInput = <input />;
const controlledInput = (
<input value={stateValue} onChange={handleInputChange} />
);

Controlled Components

A controlled form element in React is built with a change handler function and a value attribute.

const controlledInput = (
<input value={stateValue} onChange={handleInputChange} />
);

Learn more on Codecademy