@if (config().label || config().infoIcon) {
<span
  class="df-circle-toggle-group-label"
  [ngClass]="{
    'is-centered': isRetailChannel() && !isA1
  }"
>
  @if (config().label && isRetailChannel()) {
  <p nxHeadline="subsection-xsmall" class="nx-font-weight-regular">
    {{ config().label | interpolateFromStore | async }}
  </p>
  } @else if (config().label && !isRetailChannel()) {
  <p nxCopytext class="nx-margin-bottom-s nx-font-weight-semibold">
    {{ config().label | interpolateFromStore | async }}
  </p>
  } @if (config().infoIcon) {
  <df-info-icon nxFormfieldAppendix [config]="config().infoIcon"> </df-info-icon>
  }
</span>
}
<nx-circle-toggle-group
  [formControl]="$any(control())"
  [responsive]="responsive()"
  [attr.data-testid]="config().testId"
  (focusout)="onBlur($event)"
>
  <div nxLayout="grid maxwidth nopadding">
    <div nxRow [rowJustify]="rowJustify()" data-testid="optionsRow">
      @for (item of circleToggles(); track item.value) {
      <div
        [nxCol]="columnSpan()"
        [ngClass]="{
          'options-center': !optionsLeftAlignInExpert() && !(isRetailChannel() && isA1)
        }"
        data-testid="optionsCol"
      >
        <nx-circle-toggle
          [label]="(item.label | interpolateFromStore | async) ?? ''"
          [value]="item.value"
          id="{{ item.value }}"
          data-testid="circleToggle"
          [icon]="item.icon ?? ''"
          [svg]="item.svg ?? '' | talyNormalizeUrl"
          [svgChecked]="item.svgChecked ?? '' | talyNormalizeUrl"
          [hint]="(item.hint | interpolateFromStore | async) ?? ''"
          [circleText]="(item.circleText | interpolateFromStore | async) ?? ''"
        >
        </nx-circle-toggle>
      </div>
      }
    </div>
  </div>

  @for (message$ of errorMessages(); track $index) {
  <nx-error class="nx-margin-top-xs" [appearance]="nxErrorAppearance">{{
    message$ | async
  }}</nx-error>
  }
</nx-circle-toggle-group>
@if (config().note && !(control().touched && control().invalid)) {
<nx-message context="info">
  <span>{{ config().note }}</span>
</nx-message>
}

./circle-toggle-group.component.scss

:host {
  df-info-icon {
    ::ng-deep {
      padding-left: 8px;
    }
  }
}

.options-center {
  display: flex;
  justify-content: center;
}

.df-circle-toggle-group-label {
  display: block;
  margin-bottom: 16px;

  &.is-centered {
    text-align: center;
  }

  p {
    display: inline;
  }
}