☑️ Uso de checkboxes para seleccionar opciones en React

☑️ Uso de checkboxes para seleccionar opciones en React

Los checkboxes permiten que el usuario seleccione una o varias opciones de un conjunto. En React, podemos manejarlos de manera controlada usando el estado para almacenar las opciones seleccionadas.

---

1️⃣ Checkbox individual controlado

Cada checkbox puede tener su propio estado booleano, controlando si está seleccionado o no.

function CheckboxExample() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = () => setChecked(!checked);

  return (
    <div>
      <label>
        <input type="checkbox" checked={checked} onChange={handleChange} />
        Acepto los términos y condiciones
      </label>
      <p>Checkbox marcado: {checked ? "Sí" : "No"}</p>
    </div>
  );
}

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

Acepto los términos y condiciones

Checkbox marcado: …

---

2️⃣ Checkbox múltiple con un estado común

Para manejar varios checkboxes, podemos usar un array en el estado que contenga las opciones seleccionadas.

function MultipleCheckboxes() {
  const [selectedOptions, setSelectedOptions] = React.useState([]);

  const handleChange = e => {
    const value = e.target.value;
    setSelectedOptions(prev =>
      prev.includes(value)
        ? prev.filter(option => option !== value)
        : [...prev, value]
    );
  };

  return (
    <div>
      <label>
        <input type="checkbox" value="Manzanas" onChange={handleChange} /> Manzanas
      </label>
      <label>
        <input type="checkbox" value="Naranjas" onChange={handleChange} /> Naranjas
      </label>
      <label>
        <input type="checkbox" value="Plátanos" onChange={handleChange} /> Plátanos
      </label>

      <p>Seleccionados: {selectedOptions.join(", ")}</p>
    </div>
  );
}

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

Manzanas
Naranjas
Plátanos

Seleccionados: …

---

3️⃣ Buenas prácticas

• ✅ Usar un único estado (array) para múltiples checkboxes relacionados.
• ✅ Mantener el valor de cada checkbox en value para identificarlo fácilmente.
• ✅ Evitar manipular el DOM directamente; siempre usar estado y onChange.
• ✅ Mostrar al usuario claramente las opciones seleccionadas.

← Volver al índice