Components: Label for md-radio-group

[AbakumovAlexandr]

Bug, feature request, or proposal:

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

What is the expected behavior?

We need some built-in means to add labels (probably, not only for md-radio-group) when needed.

What is the current behavior?

There is no built-in way to give a label to a md-radio-group. You have to add, lay out and style HTML label, span or div by yourself.

What are the steps to reproduce?

Using a sample layout:

<label>Sort by</label>
<md-radio-group>
    <md-radio-button value="1">Date</md-radio-button>
    <md-radio-button value="2">Status</md-radio-button>
    <md-radio-button value="3">From</md-radio-button>
    <md-radio-button value="4">To</md-radio-button>
</md-radio-group>

Leads to an un-styled label:

What is the use-case or motivation for changing an existing behavior?

Many times we want to label a md-radio-group, but don't have built-in means to do so.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "2.0.0-beta.11"

[leocaseiro]

Perhaps if we implement #7891, it'll work for radio-group as well.

[leocaseiro]

A quick solution for that, is using a mat-list and the [mat-subheader], like so:

<mat-list>
    <h3 mat-subheader>Label for RadioGroup</h3>
    <mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
    <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
      {{season}}
    </mat-radio-button>
  </mat-radio-group>
</mat-list>

Eq: https://plnkr.co/edit/k73FSy?p=preview

PS: You might need some style for your mat-radio-group and mat-radio-button.

.example-radio-group {
  display: inline-flex;
  flex-direction: column;
}

.example-radio-button {
  margin: 5px 16px;
}

[marcusportmann]

I had the same problem and created a simple component that leverages the functionality provided by the MatFormField component.

You can use it like this:

<radio-group-form-field>
  <mat-label>Favorite Color</mat-label>
  <mat-radio-group formControlName="favoriteColor" required="true">
    <mat-radio-button value="1">Red</mat-radio-button>
    <mat-radio-button value="2">Green</mat-radio-button>
    <mat-radio-button value="3">Blue</mat-radio-button>
  </mat-radio-group>
  <mat-hint>The favorite color hint</mat-hint>
  <mat-error *ngIf="testForm.controls['favoriteColor'].errors && !testForm.controls['favoriteColor'].untouched">
    <span *ngIf="testForm.controls['favoriteColor'].errors?.required">A favorite color is required.</span>
  </mat-error>
</radio-group-form-field>

radio-group-form-field.ts.txt