ipsos-components/src/lib/checkbox/checkbox.html

Material Design components for Angular

<label [attr.for]="inputId" class="mat-checkbox-layout" #label>
  <div class="mat-checkbox-inner-container"
       [class.mat-checkbox-inner-container-no-side-margin]="!checkboxLabel.textContent || !checkboxLabel.textContent.trim()">
    <input #input
           class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
           [id]="inputId"
           [required]="required"
           [checked]="checked"
           [attr.value]="value"
           [disabled]="disabled"
           [attr.name]="name"
           [tabIndex]="tabIndex"
           [indeterminate]="indeterminate"
           [attr.aria-label]="ariaLabel"
           [attr.aria-labelledby]="ariaLabelledby"
           [attr.aria-checked]="_getAriaChecked()"
           (change)="_onInteractionEvent($event)"
           (click)="_onInputClick($event)">
    <div matRipple class="mat-checkbox-ripple"
         [matRippleTrigger]="label"
         [matRippleDisabled]="_isRippleDisabled()"
         [matRippleRadius]="_rippleConfig.radius"
         [matRippleSpeedFactor]="_rippleConfig.speedFactor"
         [matRippleCentered]="_rippleConfig.centered">
    </div>
    <div class="mat-checkbox-frame"></div>
    <div class="mat-checkbox-background">
      <svg version="1.1"
           focusable="false"
           class="mat-checkbox-checkmark"
           viewBox="0 0 24 24"
           xml:space="preserve">
        <path class="mat-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. -->
      <div class="mat-checkbox-mixedmark"></div>
    </div>
  </div>
  <span class="mat-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>