<fieldset class="gn-radio-group">
  <div class="gn-radio-group__header">
    <legend class="gn-radio-group__legend">Grupo de opciones</legend>
  </div>
  <div class="gn-radio-group__options docs-radio-grid">
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="user-type-basic" id="rd-basic-1" value="student">
      <label class="gn-radio__label" for="rd-basic-1"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Estudiante</span></span></label>
    </div>
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="user-type-basic" id="rd-basic-2" value="teacher">
      <label class="gn-radio__label" for="rd-basic-2"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Docente</span></span></label>
    </div>
  </div>
</fieldset>

<fieldset class="gn-radio-group">
  <div class="gn-radio-group__header">
    <legend class="gn-radio-group__legend">Canal preferido</legend>
  </div>
  <div class="gn-radio-group__options docs-radio-grid">
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="channel-selected" id="rd-selected-1" value="email">
      <label class="gn-radio__label" for="rd-selected-1"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Email</span></span></label>
    </div>
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="channel-selected" id="rd-selected-2" value="sms" checked>
      <label class="gn-radio__label" for="rd-selected-2"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">SMS</span></span></label>
    </div>
  </div>
</fieldset>

<fieldset class="gn-radio-group" aria-describedby="rd-hint-text">
  <div class="gn-radio-group__header">
    <legend class="gn-radio-group__legend">Idioma</legend>
    <p id="rd-hint-text" class="gn-field__hint">Selecciona el idioma principal para las notificaciones.</p>
  </div>
  <div class="gn-radio-group__options docs-radio-grid">
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="language-hint" id="rd-hint-1" value="es">
      <label class="gn-radio__label" for="rd-hint-1"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Español</span></span></label>
    </div>
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="language-hint" id="rd-hint-2" value="eu">
      <label class="gn-radio__label" for="rd-hint-2"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Euskera</span></span></label>
    </div>
  </div>
</fieldset>

<fieldset class="gn-radio-group">
  <div class="gn-radio-group__header">
    <legend class="gn-radio-group__legend">Tipo de acceso<span class="gn-field__required" aria-hidden="true">*</span><span class="sr-only">obligatorio</span></legend>
  </div>
  <div class="gn-radio-group__options docs-radio-grid">
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="access-required" id="rd-required-1" value="public" required>
      <label class="gn-radio__label" for="rd-required-1"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Público</span></span></label>
    </div>
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="access-required" id="rd-required-2" value="private" required>
      <label class="gn-radio__label" for="rd-required-2"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Privado</span></span></label>
    </div>
  </div>
</fieldset>

<fieldset class="gn-radio-group" aria-describedby="rd-error-text">
  <div class="gn-radio-group__header">
    <legend class="gn-radio-group__legend">Tipo de usuario</legend>
    <p id="rd-error-text" class="gn-field__error">
      <svg class="gn-field__error-icon" xmlns="http://www.w3.org/2000/svg" width="3" height="15" viewBox="0 0 3 15" fill="none" aria-hidden="true" focusable="false">
        <path d="M1.50193 14.8389C1.91494 14.8389 2.26787 14.6975 2.56071 14.4146C2.85356 14.1317 3 13.7916 3 13.3944C3 12.9972 2.85291 12.6577 2.55879 12.3761C2.26466 12.0944 1.91109 11.9536 1.49807 11.9536C1.08506 11.9536 0.732128 12.095 0.439286 12.3779C0.146443 12.6608 0 13.0009 0 13.3981C0 13.7953 0.147085 14.1348 0.441214 14.4164C0.735343 14.6981 1.08891 14.8389 1.50193 14.8389ZM3 9.89262V0H0V9.89262H3Z" fill="currentColor"/>
      </svg>
      <span class="gn-field__error-prefix">Error:</span>
      <span class="gn-field__error-text">Selecciona una opción.</span>
    </p>
  </div>
  <div class="gn-radio-group__options docs-radio-grid">
    <div class="gn-radio gn-radio--error">
      <input class="gn-radio__input" type="radio" name="user-type-error" id="rd-error-1" value="student" required aria-invalid="true" aria-describedby="rd-error-text">
      <label class="gn-radio__label" for="rd-error-1"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Estudiante</span></span></label>
    </div>
    <div class="gn-radio gn-radio--error">
      <input class="gn-radio__input" type="radio" name="user-type-error" id="rd-error-2" value="teacher" required aria-invalid="true" aria-describedby="rd-error-text">
      <label class="gn-radio__label" for="rd-error-2"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Docente</span></span></label>
    </div>
  </div>
</fieldset>

<fieldset class="gn-radio-group">
  <div class="gn-radio-group__header">
    <legend class="gn-radio-group__legend">Estado deshabilitado</legend>
  </div>
  <div class="gn-radio-group__options docs-radio-grid">
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="rd-disabled" id="rd-disabled-1" disabled>
      <label class="gn-radio__label" for="rd-disabled-1"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Disabled unchecked</span></span></label>
    </div>
    <div class="gn-radio">
      <input class="gn-radio__input" type="radio" name="rd-disabled" id="rd-disabled-2" checked disabled>
      <label class="gn-radio__label" for="rd-disabled-2"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Disabled checked</span></span></label>
    </div>
  </div>
</fieldset>

<fieldset class="gn-radio-group">
  <div class="gn-radio-group__header">
    <legend class="gn-radio-group__legend">Selección en tarjeta</legend>
  </div>
  <div class="gn-radio-group__options docs-radio-grid">
    <div class="gn-radio gn-radio--tiled">
      <input class="gn-radio__input" type="radio" name="rd-tiled" id="rd-tiled-1" checked>
      <label class="gn-radio__label" for="rd-tiled-1"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Opción tiled/card</span></span></label>
    </div>
    <div class="gn-radio gn-radio--tiled gn-radio--sm">
      <input class="gn-radio__input" type="radio" name="rd-tiled-sm" id="rd-tiled-2" checked>
      <label class="gn-radio__label" for="rd-tiled-2"><span class="gn-radio__box" aria-hidden="true"><span class="gn-radio__dot"></span></span><span class="gn-radio__content"><span class="gn-radio__text">Opción tiled/card SM</span></span></label>
    </div>
  </div>
</fieldset>