React Uncontrolled Forms Explained — Using Refs for Form Data

In this tutorial, you will learn about React Uncontrolled Forms Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React uncontrolled forms store form data in the DOM itself, accessed via refs when needed, providing a simpler approach for forms where you only need values on submit.

What You'll Learn

• What uncontrolled components are
• How to use refs to access form values
• How defaultValue works
• How to handle file inputs
• When to choose uncontrolled over controlled

Why It Matters

Uncontrolled forms are simpler for basic forms. You write less code, avoid re-renders on every keystroke, and integrate easily with non-React form libraries.

Real-World Use

Durga Antivirus Pro uses uncontrolled forms for simple preference toggles and the file upload dialog, where real-time validation is unnecessary and the form is submitted in one action.

flowchart LR
    A[Form Renders] --> B[DOM Stores Values]
    C[User Submits] --> D[Read Refs]
    D --> E[Process Values]
    style A fill:#3b82f6,color:#fff

Basic Uncontrolled Form

Use refs to read form values on submit:

import { useRef } from "react";

function LoginForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);
  const rememberRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = {
      email: emailRef.current.value,
      password: passwordRef.current.value,
      remember: rememberRef.current.checked,
    };
    console.log("Form submitted:", formData);
  };

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: "0 auto" }}>
      <div style={{ marginBottom: 12 }}>
        <label>Email:
          <input ref={emailRef} type="email" defaultValue="user@example.com" style={{ width: "100%", padding: 8 }} />
        </label>
      </div>
      <div style={{ marginBottom: 12 }}>
        <label>Password:
          <input ref={passwordRef} type="password" style={{ width: "100%", padding: 8 }} />
        </label>
      </div>
      <div style={{ marginBottom: 12 }}>
        <label>
          <input ref={rememberRef} type="checkbox" defaultChecked /> Remember me
        </label>
      </div>
      <button type="submit" style={{ padding: "10px 20px", background: "#3b82f6", color: "white", border: "none", borderRadius: 4 }}>
        Login
      </button>
    </form>
  );
}

Expected output: A login form that reads values on submit using refs. The email has a default value. The form does not re-render on keystrokes.

Common Mistakes

1. Mixing controlled and uncontrolled for the same input
2. Using value instead of defaultValue in uncontrolled
3. Not using refs correctly for file inputs
4. Assuming uncontrolled is always simpler
5. Forgetting to handle reset properly

Practice Questions

1. How do you read an uncontrolled input value?
2. What is defaultValue used for?
3. When should you use uncontrolled forms?
4. How do you handle file upload in uncontrolled?
5. How do you reset an uncontrolled form?