igniteui-angular-sovn/src/lib/checkbox/checkbox.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<input #checkbox class="igx-checkbox__input"
    type="checkbox"
    [id]="inputId"
    [name]="name"
    [value]="value"
    [tabindex]="tabindex"
    [disabled]="disabled"
    [indeterminate]="indeterminate"
    [checked]="checked"
    [required]="required"
    [attr.aria-required]="required"
    [attr.aria-invalid]="invalid"
    [attr.aria-checked]="ariaChecked"
    [attr.aria-labelledby]="ariaLabel ? null : ariaLabelledBy"
    [attr.aria-label]="ariaLabel"
    (change)="_onCheckboxChange($event)"
    (blur)="onBlur()" />

<div
    igxRipple
    igxRippleTarget=".igx-checkbox__ripple"
    [igxRippleDisabled]="disableRipple"
    [igxRippleCentered]="true"
    [igxRippleDuration]="300"
    class="igx-checkbox__composite-wrapper"
>
    <span #label class="igx-checkbox__composite">
        <svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M4.1,12.7 9,17.6 20.3,6.3" />
        </svg>
    </span>

    <div class="igx-checkbox__ripple"></div>
</div>

<span #placeholderLabel
    [class]="labelClass"
    [id]="labelId">
    <ng-content></ng-content>
</span>