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

Material Design components for Angular

<!-- TODO(jelbourn): render the radio on either side of the content -->
<!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. -->
<label [attr.for]="inputId" class="mat-radio-label" #label>
  <!-- The actual 'radio' part of the control. -->
  <div class="mat-radio-container">
    <div class="mat-radio-outer-circle"></div>
    <div class="mat-radio-inner-circle"></div>
    <div mat-ripple class="mat-radio-ripple"
         [matRippleTrigger]="label"
         [matRippleDisabled]="_isRippleDisabled()"
         [matRippleCentered]="_rippleConfig.centered"
         [matRippleRadius]="_rippleConfig.radius"
         [matRippleSpeedFactor]="_rippleConfig.speedFactor">
    </div>
  </div>

  <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
         [id]="inputId"
         [checked]="checked"
         [disabled]="disabled"
         [attr.name]="name"
         [required]="required"
         [attr.aria-label]="ariaLabel"
         [attr.aria-labelledby]="ariaLabelledby"
         (change)="_onInputChange($event)"
         (click)="_onInputClick($event)">

  <!-- The label content for radio control. -->
  <div class="mat-radio-label-content" [class.mat-radio-label-before]="labelPosition == 'before'">
    <!-- Add an invisible span so JAWS can read the label -->
    <span style="display:none">&nbsp;</span>
    <ng-content></ng-content>
  </div>
</label>