React Forms — inputs, checkboxes, radios & select examples

Forms
Inputs
Checkbox
Radio
Select

Forms are an important part of web applications. They allow users to enter data such as text, email, password, or select options. In React, handling forms is slightly different because form elements are controlled using state.

Controlled Components

In React, an input element is called controlled when its value is managed by React state.

To create a controlled form in React, you need to follow these steps:

Set up state variables to hold the form data.
Bind the form inputs to the state variables using the value attribute.
Update the state variables on user input using event handlers.


import { useState } from "react";


function TextInputExample() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Name: {name}</p>
    </div>
  );
}

Inputs

Input includes input type text, password, email, and more. In fact, input is the most common way to get user input in a web application

In React, an input element is called controlled when its value is managed by React state.

Here's an example of a controlled input component in React:


import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

   const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Email:", email);
    console.log("Password:", password);
  };

  return (
     <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Enter email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <br />

      <input
        type="password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <br />
      <button type="submit">Login</button>
    </form>
  );
}

In this example, the TextInputExample component uses the useState hook to create a state variable called name. The input element's value is bound to the name state, and the onChange event updates the state whenever the user types in the input field.

Checkbox

You can use checkboxes to allow users to select multiple options from a set. Checkbox are used to handle multiple selections, like multiple choice questions. Checkboxes are controlled components in React, meaning their checked state is managed by React state.

Here's an example:


import { useState } from "react";
function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={(e) => setIsChecked(e.target.checked)}
      />
      <p>Checked: {isChecked.toString()}</p>
    </div>
  );
}

In this example, the CheckboxExample component uses the useState hook to create a state variable called isChecked. The checkbox input's checked state is bound to the isChecked state, and the onChange event updates the state whenever the user toggles the checkbox.

Radio buttons

Radio buttons allow users to select one option from a set, for example, gender selection. They are commonly used in forms when you want to present a list of mutually exclusive options.

Here's an example:


import { useState } from "react";

function RadioButtonExample() {
  const [selectedOption, setSelectedOption] = useState("");

  return (
    <div>
    Gender:
      <label>
        <input
          type="radio"
          value="male"
          checked={selectedOption === "male"}
          onChange={(e) => setSelectedOption(e.target.value)}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="female"
          checked={selectedOption === "female"}
          onChange={(e) => setSelectedOption(e.target.value)}
        />
        Option 2
      </label>
      <p>Selected: {selectedOption}</p>
    </div>
  );
}

In this example, the RadioButtonExample component uses the useState hook to create a state variable called selectedOption. The radio button inputs' checked state is bound to the selectedOption state, and the onChange event updates the state whenever the user selects a different option.

Select Dropdown

Select dropdowns allow users to choose one option from a list. They are useful when you have a long list of options and want to save space in your form.

Here's an example:


import { useState } from "react";
function SelectExample() {
     const [city, setCity] = useState("");
     return (
     <div>
       <select value={city} onChange={(e) => setCity(e.target.value)}>
         <option value="option1">New Delhi</option>
         <option value="option2">Mumbai</option>
         <option value="option3">Chennai</option>
           <option value="option4">Kolkata</option>
       </select>
       <p>Selected: {city}</p>
     </div>
   );
}

In this example, the SelectExample component uses the useState hook to create a state variable called city. The select input's value is bound to the city state, and the onChange event updates the state whenever the user selects a different option.

Summary

Forms in React use controlled components.

The input value is managed by state, and updates using onChange.

Always use value (for text/select) or checked (for checkbox/radio) to connect inputs to state.

Forms can handle text, password, checkbox, radio, and select dropdowns easily.