In an uncontrolled component, form data is handled by the DOM itself, not React. You access values via a ref when needed — similar to traditional HTML forms.

function NameForm() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello, ${inputRef.current.value}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input ref={inputRef} defaultValue="Alice" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

• Integrating with non-React code
• Very simple forms (one or two fields)
• File inputs (file inputs are always uncontrolled)

1. How do you access an uncontrolled input’s value? A) State B) Ref C) Query selector D) Events → B
2. Which input type must be uncontrolled? A) Text B) File C) Select D) Checkbox → B

📖 DOM manages the state. Access values via refs. Good for simple forms and file inputs.

Controlled Components | useRef