Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
A controlled component is a form element whose value is controlled by React state. The input's value is always driven by React state, making it the single source of truth!
Try typing! State updates on every keystroke
function ControlledForm() {
const [formData, setFormData] = React.useState({
username: '',
email: '',
age: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
return (
<div className="controlled-form">
<h2>✅ Controlled Form</h2>
<p className="subtitle">React state controls every input</p>
<div className="form-group">
<label>Username</label>
<input
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Enter username"
/>
</div>
<div className="form-group">
<label>Email</label>
<input
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Enter email"
/>
</div>
<div className="form-group">
<label>Age</label>
<input
name="age"
type="number"
value={formData.age}
onChange={handleChange}
placeholder="Enter age"
/>
</div>
<div className="state-display">
<strong>🔍 Current State:</strong>
<pre>{JSON.stringify(formData, null, 2)}</pre>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ControlledForm />);Loading preview...
Validate input in real-time
function ValidatedInput() {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const handleChange = (e) => {
const value = e.target.value;
setEmail(value);
// Validate in real-time
if (value && !/\S+@\S+\.\S+/.test(value)) {
setError('Invalid email format');
} else {
setError('');
}
};
return (
<div>
<input
type="email"
value={email}
onChange={handleChange}
/>
{error && <span style={{ color: 'red' }}>{error}</span>}
</div>
);
}
// Controlled with transformation
function UppercaseInput() {
const [value, setValue] = useState('');
const handleChange = (e) => {
// Transform to uppercase automatically
setValue(e.target.value.toUpperCase());
};
return (
<input
type="text"
value={value}
onChange={handleChange}
/>
);
}
// Controlled with character limit
function LimitedInput() {
const [text, setText] = useState('');
const maxLength = 100;
const handleChange = (e) => {
if (e.target.value.length <= maxLength) {
setText(e.target.value);
}
};
return (
<div>
<textarea
value={text}
onChange={handleChange}
/>
<p>{text.length} / {maxLength}</p>
</div>
);
}Input value is always derived from React state
Must provide onChange to update state
State is the single source of truth
Enables validation, transformation, limits