How to use controlled components in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using controlled components in React provides complete control over form state, enabling validation, dynamic behavior, and predictable data flow. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented controlled components extensively in enterprise forms and complex user interfaces. From my expertise, the most reliable approach is managing form values in React state and using onChange handlers to update state on user input. This pattern ensures React is the single source of truth for form data, enabling powerful features like real-time validation and conditional rendering.
Manage form values in React state and use onChange handlers to control input values completely.
import { useState } from 'react'
function RegistrationForm() {
const [formData, setFormData] = useState({
email: '',
password: '',
confirmPassword: ''
})
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
})
}
const handleSubmit = (e) => {
e.preventDefault()
console.log('Form data:', formData)
}
return (
<form onSubmit={handleSubmit}>
<input
name='email'
type='email'
value={formData.email}
onChange={handleChange}
placeholder='Email'
/>
<input
name='password'
type='password'
value={formData.password}
onChange={handleChange}
placeholder='Password'
/>
<button type='submit'>Register</button>
</form>
)
}
Here React state manages all form values through formData, and value={formData.email} sets the input value from state. The onChange={handleChange} handler updates state on every input change, keeping React state and DOM synchronized. This approach enables real-time validation, conditional field display, and complete control over form behavior through React’s declarative paradigm.
Best Practice Note:
This is the same approach we use in CoreUI React components for complex forms with validation, dynamic fields, and enterprise-grade user interfaces. Controlled components are preferred for most React applications as they provide predictable behavior, easier testing, and better integration with React’s ecosystem.
