<label [attr.for]="inputId" class="twnd-checkbox-layout" #label>
  <span
    class="twnd-checkbox-inner-container"
    [class.twnd-checkbox-inner-container-no-side-margin]="!checkboxLabel.textContent || !checkboxLabel.textContent.trim()">
    <input
      #input
      class="twnd-checkbox-input cdk-visually-hidden"
      type="checkbox"
      [id]="inputId"
      [required]="required"
      [checked]="checked"
      [attr.value]="value"
      [disabled]="disabled"
      [attr.name]="name"
      [tabIndex]="tabIndex"
      [attr.aria-label]="ariaLabel || null"
      [attr.aria-labelledby]="ariaLabelledby"
      [attr.aria-checked]="_getAriaChecked()"
      [attr.aria-describedby]="ariaDescribedby"
      (change)="_onInteractionEvent($event)"
      (click)="_onInputClick($event)" />
    <span
      twndRipple
      class="twnd-checkbox-ripple twnd-focus-indicator"
      [twndRippleTrigger]="label"
      [twndRippleDisabled]="_isRippleDisabled()"
      [twndRippleRadius]="20"
      [twndRippleCentered]="true"
      [twndRippleAnimation]="{enterDuration: _animationMode === 'NoopAnimations' ? 0 : 150}">
      <span class="twnd-ripple-element twnd-checkbox-persistent-ripple"></span>
    </span>
    <span class="twnd-checkbox-frame"></span>
    <span class="twnd-checkbox-background">
      <svg
        version="1.1"
        focusable="false"
        class="twnd-checkbox-checkmark"
        viewBox="0 0 24 24"
        xml:space="preserve"
        aria-hidden="true">
        <path
          class="twnd-checkbox-checkmark-path"
          fill="none"
          stroke="white"
          d="M4.1,12.7 9,17.6 20.3,6.3" />
      </svg>
      <!-- Element for rendering the indeterminate state checkbox. -->
      <span class="twnd-checkbox-mixedmark"></span>
    </span>
  </span>
  <span
    class="twnd-checkbox-label"
    #checkboxLabel
    (cdkObserveContent)="_onLabelTextChange()">
    <!-- Add an invisible span so JAWS can read the label -->
    <span style="display: none">&nbsp;</span>
    <ng-content></ng-content>
  </span>
</label>