@if (!hidden) {
  <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
  <label
    class="spot-form-field--label-wrap spot-selector-field--label-wrap"
    [ngClass]="{ 'spot-selector-field--label-wrap_reversed': reverseLabel }"
    >
    <div
      class="spot-form-field--input spot-selector-field--input"
      [ngClass]="{ 'spot-selector-field--input_reversed': reverseLabel }"
      [attr.aria-describedby]="describedByID"
      >
      <ng-content select="[slot=input]" />
    </div>
    @if (label) {
      <div
        class="spot-form-field--label spot-selector-field--label"
        [ngClass]="{
          'spot-selector-field--label_regular': labelWeight === 'regular'
        }"
        >
        @if (showErrorMessage) {
          <span
            class="Hidden for sighted"
          >Invalid</span>
        }
        {{ label }}
        @if (required) {
          <span class="spot-form-field--label-indicator">*</span>
        }
        <ng-content select="[slot=help-text]" />
      </div>
    }
  </label>
  <div
    class="spot-form-field--description"
    [id]="descriptionID"
    >
    <ng-content select="[slot=description]" />
  </div>
  @if (showErrorMessage) {
    <div
      class="spot-form-field--errors"
      [id]="errorsID"
      >
      <ng-content select="[slot=errors]" />
    </div>
  }
}