Radio Button

# Componente Radio Button

El componente Radio permite que el usuario seleccione una (y solo una) opción de un conjunto mutuamente excluyente.

Semántica BEM y Atributos

La estructura descansa sobre un <input type="radio"> nativo. Para posibilitar la compatibilidad y exclusiones agilizadas del HTML nativo, cada input aglutinador debe enlazar la propiedad name con exactitud cruzada entre los demás miembros radio de su mismo grupo de selección.

Accesibilidad

- Utiliza .sr-only para extraer el input del flujo visual pero mantenerlo latente a los Screen Readers. - Los focos operan usando una transición pseudo-escalada controlada internamente que dispara el contorno 2px black + box-shadow celeste. - En caso de error, el <input> debe acompañarse semánticamente del atributo de validación nativa aria-invalid="true".

Variantes

1. Predeterminado (LG): Círculo de selección con un diámetro de 24px que instaura un punto sólido interno de escala escalada. 2. Small (SM) .gn-radio--sm: Comprime el diámetro periférico a 19px y los embutidos a ~5px. 3. Tarjeta / Tiled .gn-radio--tiled: Enjabona todo el input en una gran caja perimetrada, facilitando hits móviles al ensanchar el área clickable mediante rellenos.

*La variable .gn-radio--conditional extiende una placa visual para encajar hijos lógicos por debajo (usado en validaciones anidadas).*

<div class="gn-radio">
  <input class="gn-radio__input" type="radio" name="radio-group-1" id="radio-1" />
  <label class="gn-radio__label" for="radio-1">
    <span class="gn-radio__box">
      <span class="gn-radio__dot"></span>
    </span>
    <span class="gn-radio__content">
      <span class="gn-radio__text">Label text</span>
    </span>
  </label>
</div>