⚪ Implementación de radio buttons para formularios en React

⚪ Implementación de radio buttons para formularios en React

Los radio buttons permiten al usuario seleccionar una sola opción de un conjunto. En React, normalmente se controlan usando un estado que indica cuál opción está seleccionada.

---

1️⃣ Radio buttons controlados con estado

Creamos un estado que almacene la opción seleccionada y actualizamos el valor cada vez que el usuario selecciona un radio button.

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

  const handleChange = (e) => {
    setSelectedOption(e.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          name="fruta"
          value="Manzanas"
          checked={selectedOption === "Manzanas"}
          onChange={handleChange}
        /> Manzanas
      </label>
      <label>
        <input
          type="radio"
          name="fruta"
          value="Naranjas"
          checked={selectedOption === "Naranjas"}
          onChange={handleChange}
        /> Naranjas
      </label>
      <label>
        <input
          type="radio"
          name="fruta"
          value="Plátanos"
          checked={selectedOption === "Plátanos"}
          onChange={handleChange}
        /> Plátanos
      </label>

      <p>Opción seleccionada: {selectedOption}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<RadioButtonExample />);
  

Manzanas
Naranjas
Plátanos

Opción seleccionada: …

---

2️⃣ Buenas prácticas con radio buttons

• ✅ Usar el mismo name para todos los radio buttons del grupo.
• ✅ Controlar el valor seleccionado mediante estado de React, nunca manipular directamente el DOM.
• ✅ Mostrar claramente la opción seleccionada al usuario.
• ✅ Combinar con onChange para manejar la selección y posibles acciones posteriores.

---

3️⃣ Radio buttons y envío de formularios

Al enviar el formulario, puedes acceder al valor seleccionado desde el estado y procesarlo en tu función onSubmit.

function FormWithRadio() {
  const [selectedOption, setSelectedOption] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Opción enviada: ${selectedOption}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <input type="radio" name="fruta" value="Manzanas" checked={selectedOption === "Manzanas"} onChange={(e) => setSelectedOption(e.target.value)} /> Manzanas
      </label>
      <label>
        <input type="radio" name="fruta" value="Naranjas" checked={selectedOption === "Naranjas"} onChange={(e) => setSelectedOption(e.target.value)} /> Naranjas
      </label>
      <label>
        <input type="radio" name="fruta" value="Plátanos" checked={selectedOption === "Plátanos"} onChange={(e) => setSelectedOption(e.target.value)} /> Plátanos
      </label>

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

ReactDOM.createRoot(document.getElementById('root')).render(<FormWithRadio />);
  

← Volver al índice