<div class="ui-radiobutton-group" [ngClass]="{'ui-radiobutton-group--invalid': uiInvalid}">
  <div class="ui-radiobutton-group__radiobuttons" [ngClass]="radiobuttonsModifierClass">
    <digi-form-radiobutton
      *ngFor="let item of uiRadiobuttons; let first = first; let index = index"
      class="ui-radiobutton-group__radiobutton"
      [afId]="first ? uiId : uiId + '-' + index"
      [afLabel]="getLabelText(item.label)"
      [afValue]="item.value"
      [afChecked]="currentValue === item.value"
      [afName]="name"
      [afRequired]="uiRequired"
      [afValidation]="uiInvalid ? 'error' : 'neutral'"
      [afVariation]="uiSecondary ? 'secondary' : 'primary'"
      (afOnChange)="checkForChange($event.detail.target.value)"
    ></digi-form-radiobutton>
  </div>
  <div aria-atomic="true" role="alert">
    <digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
      >{{uiValidationMessage}}</digi-form-validation-message
    >
  </div>
</div>
