<div id="radioSelectionBoxes">
  <sky-radio-group ariaLabel="Test options" value="red">
    @for (item of radioArray; track item) {
    <sky-selection-box [control]="radio">
      <sky-icon [icon]="item.icon" [iconType]="item.iconType" />
      <sky-selection-box-header #radioHeaderId="skyId" skyId>
        {{ item.header }}
      </sky-selection-box-header>
      <sky-radio #radio [labelledBy]="radioHeaderId.id" [value]="item.name" />
    </sky-selection-box>
    }
  </sky-radio-group>
</div>

<div id="checkboxSelectionBoxes">
  <form [formGroup]="myForm">
    @for (aControl of selectionBoxFormArray.controls; track aControl; let i =
    $index) {
    <sky-selection-box [control]="checkbox">
      <sky-icon
        [icon]="checkboxSelectionBoxes[i].icon"
        [iconType]="checkboxSelectionBoxes[i].iconType"
      />
      <sky-selection-box-header #checkboxHeaderId="skyId" skyId>
        {{ checkboxSelectionBoxes[i].header }}
      </sky-selection-box-header>
      <sky-selection-box-description>
        {{ checkboxSelectionBoxes[i].description }}
      </sky-selection-box-description>
      <sky-checkbox
        #checkbox
        [formControl]="aControl"
        [labelledBy]="checkboxHeaderId.id"
      />
    </sky-selection-box>
    }
  </form>
</div>

<sky-selection-box [control]="checkboxWithLink">
  <sky-selection-box-header #checkboxWithLinkHeaderId="skyId" skyId>
    Header
  </sky-selection-box-header>
  <sky-selection-box-description>
    This <a id="link" href="#" class="sky-emphasized">link</a> should not be
    tabbable.
  </sky-selection-box-description>
  <sky-checkbox #checkboxWithLink [labelledBy]="checkboxWithLinkHeaderId.id" />
</sky-selection-box>

<div id="disabled-selection-box">
  <sky-selection-box [control]="disabledCheckbox">
    <sky-selection-box-header #disabledCheckboxHeaderId="skyId" skyId>
      Disabled selection box
    </sky-selection-box-header>
    <sky-selection-box-description>
      I should be disabled
    </sky-selection-box-description>
    <sky-checkbox
      #disabledCheckbox
      [disabled]="true"
      [labelledBy]="disabledCheckboxHeaderId.id"
    />
  </sky-selection-box>
</div>
