ipsos-components/src/demo-app/a11y/radio/radio-a11y.html

Material Design components for Angular

<section>
  <h2>Radio buttons in group</h2>
  <mat-radio-group name="seasons" [(ngModel)]="favoriteSeason" aria-label="Seasons">
    <mat-radio-button *ngFor="let season of seasonOptions" [value]="season">
      {{season}}
    </mat-radio-button>
  </mat-radio-group>
</section>

<section>
  <h2>Radio buttons with align-end label position</h2>
  <mat-radio-group name="bread" align="end" aria-label="Breads">
    <mat-radio-button value="toast">Toast</mat-radio-button>
    <mat-radio-button value="biscuit">Biscuit</mat-radio-button>
    <mat-radio-button value="bagel">Bagel</mat-radio-button>
  </mat-radio-group>
</section>

<section>
  <h2>Disabled radio buttons</h2>
  <p>
    This section contains three radio buttons for "Yes", "No", and "Maybe".
    The "Maybe" radio button is disabled.
  </p>
  <mat-radio-button name="disable">Yes</mat-radio-button>
  <mat-radio-button name="disable">No</mat-radio-button>
  <mat-radio-button name="disable" [disabled]="true">Maybe</mat-radio-button>
</section>

<section>
  <h2>Radio buttons with different colors</h2>
  <mat-radio-button name="color">Default (accent)</mat-radio-button>
  <mat-radio-button name="color" color="primary">Primary</mat-radio-button>
  <mat-radio-button name="color" color="accent">Accent</mat-radio-button>
  <mat-radio-button name="color" color="warn">Warn</mat-radio-button>
</section>