Controlled forms employ state to manage input values, while uncontrolled forms use DOM elements. 

 

A Controlled form 

 

 

An Uncontrolled Form

 

 

State control

•  Controlled components: React controls state.
•  Uncontrolled components: DOM controls state.

The data flow

• Data flows from controlled components' states to input elements.
• Uncontrolled components: Refs transfer input data to components.

Use cases

• Best for validation, conditional input disable/enable, and complex interactions.
• For simple forms or non-React code integration.