Implementación de Inputs Radio y Checkbox en Formularios HTML

Cuando trabajas con formularios reactivos en Angular, los campos de selección como radio y checkbox son fundamentales para recopilar preferencias, aceptar términos o elegir entre opciones únicas. Dominar su implementación con form controls te permite manejar estados booleanos y valores de selección de manera reactiva y eficiente.

¿Cómo funciona un checkbox con form control?

Un checkbox se comporta como un booleano: si está marcado, su valor es true; si no, es false [0:30]. Esta naturaleza lo hace ideal para campos de aceptación de términos y condiciones o confirmaciones simples.

Para implementarlo, se crea un form control con un valor inicial de false:

typescript agreeField = new FormControl(false);

En el HTML, se enlaza dentro de un párrafo con el tipo checkbox y la directiva formControl [1:05]:

html

<p> <label>Agree</label> <input type="checkbox" [formControl]="agreeField" /> </p>

Al interactuar con el campo, el valor cambia reactivamente entre true y false cada vez que el usuario marca o desmarca la casilla [1:25]. Si necesitas múltiples opciones con checkboxes —por ejemplo, categorías—, debes crear un form control independiente para cada una, ya que cada checkbox mantiene su propio estado booleano [1:45].

¿Cómo implementar inputs de tipo radio con form control?

A diferencia del checkbox, un input radio permite seleccionar una única opción dentro de un grupo. Funciona de manera similar a un select: cada opción tiene un label visible para el usuario y un value que se almacena internamente [2:40].

Para crear un selector de género, por ejemplo, se define un form control vacío:

typescript genderField = new FormControl('');

En el HTML, cada opción se encierra dentro de un <label> para garantizar buena accesibilidad [2:20]. Cada input comparte el mismo form control:

html <label>Male <input type="radio" [formControl]="genderField" value="male" /> </label> <label>Female <input type="radio" [formControl]="genderField" value="female" /> </label> <label>Other <input type="radio" [formControl]="genderField" value="other" /> </label>

Al seleccionar una opción, el form control actualiza su valor automáticamente con el value correspondiente [3:30].

¿Por qué se mezclan los radio buttons y cómo solucionarlo?

Un error muy común ocurre cuando tienes varios grupos de radio en el mismo formulario [4:00]. Sin una agrupación explícita, el navegador los trata como un solo conjunto, lo que provoca que al seleccionar una opción en un grupo se deseleccione la opción del otro [4:30].

La solución es agregar el atributo name a cada grupo de radios para que el navegador los identifique como independientes [5:00]:

html

<!-- Grupo de género -->

<input type="radio" [formControl]="genderField" value="male" name="gender" /> <input type="radio" [formControl]="genderField" value="female" name="gender" />

<!-- Grupo de zonas -->

<input type="radio" [formControl]="zoneField" value="zone-1" name="zone" /> <input type="radio" [formControl]="zoneField" value="zone-2" name="zone" />

Con el atributo name, cada grupo se comporta de forma independiente y ya no interfiere con los demás [5:30].

¿Qué diferencias clave existen entre checkbox y radio?

• Checkbox: maneja valores booleanos (true/false), permite selección múltiple y requiere un form control por cada opción.
• Radio: permite una única selección dentro de un grupo, almacena el value de la opción elegida y necesita el atributo name para agrupar correctamente.
• Ambos se enlazan mediante la directiva [formControl] en formularios reactivos de Angular.

¿Cuáles son los inputs más comunes en formularios reactivos?

Con esta implementación se completan los tipos de entrada más utilizados en formularios: input text en sus variantes, select simple y múltiple, checkbox y radio [6:05]. Todos comparten el mismo patrón de enlace mediante form controls, lo que facilita la gestión reactiva del estado.

Ahora es tu turno: crea una lista de preferencias donde el usuario pueda marcar con checkboxes áreas de interés como tecnología, ciencias o moda, cada una con su propio form control. Comparte en los comentarios cómo resolviste el reto.