Form Input Types

React Form Input Types

In React, form elements such as text boxes, checkboxes, radio buttons, and dropdowns are typically implemented as controlled components.

Controlled Component Definition

A controlled component is an input element whose displayed value is always driven by React state.

React becomes the single source of truth, and every user interaction updates state through an event handler.

Core Pattern

Every controlled input uses two key props:

1. value (or checked) → connects the input to state.
2. onChange → updates state whenever the user changes the input.

1. Text Input (type="text")

Definition

Used to collect single-line text such as names, titles, or cities.

Example

import { useState } from 'react';

function TextInput() {
  const [name, setName] = useState('');

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Enter your name"
    />
  );
}

Explanation

• name stores the current text.
• e.target.value contains the user’s typed value.
• React re-renders after each keystroke.

2. Password Input (type="password")

Definition

Used to collect sensitive text such as passwords.

Example

function PasswordInput() {
  const [password, setPassword] = useState('');

  return (
    <input
      type="password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      placeholder="Enter password"
    />
  );
}

Explanation

Characters are hidden in the browser while React still stores the real value.

3. Email Input (type="email")

Definition

Used to collect email addresses.

Example

function EmailInput() {
  const [email, setEmail] = useState('');

  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="you@example.com"
    />
  );
}

Explanation

Browsers may validate that the input resembles a valid email format.

4. Number Input (type="number")

Definition

Used to collect numeric values.

Example

function NumberInput() {
  const [age, setAge] = useState('');

  return (
    <input
      type="number"
      value={age}
      onChange={(e) => setAge(e.target.value)}
      min="1"
      max="120"
    />
  );
}

Explanation

• Browser provides numeric controls.
• State still receives a string.

5. Checkbox Input (type="checkbox")

Definition

Represents a true/false value.

Example

function CheckboxInput() {
  const [agreed, setAgreed] = useState(false);

  return (
    <label>
      <input
        type="checkbox"
        checked={agreed}
        onChange={(e) => setAgreed(e.target.checked)}
      />
      I agree to the terms
    </label>
  );
}

Explanation

Checkboxes use:

• checked instead of value
• e.target.checked instead of e.target.value

6. Radio Buttons (type="radio")

Definition

Allows selecting exactly one option from a group.

Example

function RadioInput() {
  const [gender, setGender] = useState('male');

  return (
    <>
      <label>
        <input
          type="radio"
          value="male"
          checked={gender === 'male'}
          onChange={(e) => setGender(e.target.value)}
        />
        Male
      </label>

      <label>
        <input
          type="radio"
          value="female"
          checked={gender === 'female'}
          onChange={(e) => setGender(e.target.value)}
        />
        Female
      </label>
    </>
  );
}

Explanation

Only one radio button is checked at a time.

7. Textarea (<textarea>)

Definition

Used for multi-line text input.

Example

function TextAreaInput() {
  const [message, setMessage] = useState('');

  return (
    <textarea
      value={message}
      onChange={(e) => setMessage(e.target.value)}
      rows="4"
      placeholder="Enter your message"
    />
  );
}

Explanation

Works exactly like a text input but supports multiple lines.

8. Select Dropdown (<select>)

Definition

Lets the user choose one option from a list.

Example

function SelectInput() {
  const [country, setCountry] = useState('Pakistan');

  return (
    <select
      value={country}
      onChange={(e) => setCountry(e.target.value)}
    >
      <option value="Pakistan">Pakistan</option>
      <option value="India">India</option>
      <option value="Turkey">Turkey</option>
    </select>
  );
}

Explanation

The selected option always matches the state value.

9. Multi-Select Dropdown

Definition

Allows selecting multiple options.

Example

function MultiSelectInput() {
  const [skills, setSkills] = useState([]);

  const handleChange = (e) => {
    const selected = Array.from(
      e.target.selectedOptions,
      (option) => option.value
    );
    setSkills(selected);
  };

  return (
    <select multiple value={skills} onChange={handleChange}>
      <option value="React">React</option>
      <option value="Node">Node</option>
      <option value="MongoDB">MongoDB</option>
    </select>
  );
}

Explanation

The state stores an array of selected values.

10. Date Input (type="date")

Definition

Used to select a calendar date.

Example

function DateInput() {
  const [dob, setDob] = useState('');

  return (
    <input
      type="date"
      value={dob}
      onChange={(e) => setDob(e.target.value)}
    />
  );
}

Explanation

The value is stored as a string such as 2026-05-16.

11. Time Input (type="time")

Example

function TimeInput() {
  const [time, setTime] = useState('');

  return (
    <input
      type="time"
      value={time}
      onChange={(e) => setTime(e.target.value)}
    />
  );
}

12. Range Slider (type="range")

Definition

Allows selection of a value within a numeric range.

Example

function RangeInput() {
  const [volume, setVolume] = useState(50);

  return (
    <>
      <input
        type="range"
        min="0"
        max="100"
        value={volume}
        onChange={(e) => setVolume(e.target.value)}
      />
      <p>Volume: {volume}</p>
    </>
  );
}

13. Color Input (type="color")

Example

function ColorInput() {
  const [color, setColor] = useState('#000000');

  return (
    <input
      type="color"
      value={color}
      onChange={(e) => setColor(e.target.value)}
    />
  );
}

14. File Input (type="file")

Definition

Used to select files from the user’s device.

Example

function FileInput() {
  const [fileName, setFileName] = useState('');

  const handleChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setFileName(file.name);
    }
  };

  return (
    <>
      <input type="file" onChange={handleChange} />
      <p>{fileName}</p>
    </>
  );
}

Explanation

File inputs are special because selected files are accessed using e.target.files.

15. URL Input (type="url")

Example

function UrlInput() {
  const [website, setWebsite] = useState('');

  return (
    <input
      type="url"
      value={website}
      onChange={(e) => setWebsite(e.target.value)}
      placeholder="https://example.com"
    />
  );
}

16. Search Input (type="search")

Example

function SearchInput() {
  const [query, setQuery] = useState('');

  return (
    <input
      type="search"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

Complete Form Example

import { useState } from 'react';

function RegistrationForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    age: '',
    agreed: false,
    country: 'Pakistan'
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;

    setFormData({
      ...formData,
      [name]: type === 'checkbox' ? checked : value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Full Name"
      />

      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />

      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />

      <input
        type="number"
        name="age"
        value={formData.age}
        onChange={handleChange}
      />

      <label>
        <input
          type="checkbox"
          name="agreed"
          checked={formData.agreed}
          onChange={handleChange}
        />
        Accept Terms
      </label>

      <select
        name="country"
        value={formData.country}
        onChange={handleChange}
      >
        <option value="Pakistan">Pakistan</option>
        <option value="Turkey">Turkey</option>
      </select>

      <button type="submit">Register</button>
    </form>
  );
}

Summary Table

Best Practices

1. Use controlled components for predictable state management.
2. Call e.preventDefault() as the first line in onSubmit.
3. Use checked for checkboxes and radio buttons.
4. Use required, min, and max when appropriate.
5. Store related fields in a single object for larger forms.
6. Reuse one generic handleChange function when possible.