<ng-container *aclTag="aclResource">
  <!--Note: We use <fieldset> and <legend> to mark up this group for better a11y.
  This way, assistive tech can associate the label text inside <legend> with the group.
  If we use other elements (e.g. <h3> or <p>), it can't and, for example, a screenreader
  may not read it out at all.

  See: https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/-->
  <fieldset>
    <nx-label
      *ngIf="config().label"
      [size]="this.isRetailChannel() ? 'large' : 'small'"
      [ngClass]="{
        'nx-font-weight-regular': isRetailChannel()
      }"
    >
      {{ config().label | interpolateFromStore | async }}
    </nx-label>

    <nx-radio-group
      [formControl]="control()"
      [id]="config().id"
      [name]="config().id"
      [attr.data-testid]="config().testId"
      [ngClass]="{
        'radio-group-horizontal': config().horizontalLayout
      }"
      (focusout)="onBlur($event)"
    >
      <ng-container *ngFor="let option of radioOptions$ | async">
        <nx-radio
          [labelSize]="this.isRetailChannel() ? 'big' : 'small'"
          [value]="option.value"
          #thisInput
          [attr.data-testid]="option?.testId"
        >
          <span>{{ option.label | interpolateFromStore | async }}</span>
        </nx-radio>
      </ng-container>

      <taly-validation-errors
        ngProjectAs="nx-error"
        nxFormfieldError
        [errorMessages]="validationConfigs()"
        [controlErrors]="control().errors"
      >
      </taly-validation-errors>
    </nx-radio-group>

    <nx-message *ngIf="config().note && !(control().touched && control().invalid)" context="info">
      <span>{{ config().note | interpolateFromStore | async }}</span>
    </nx-message>
  </fieldset>
</ng-container>

./radio.component.scss

@use '../../src/breakpoints.scss' as *;

:host {
  display: block;
}

nx-radio {
  margin-top: var(--vertical-inner-section-spacing);
}

.radio-group-horizontal {
  @media (min-width: $breakpoint-m) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}