question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Label for md-radio-group

See original GitHub issue

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: Sample layout screenshot

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”

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:9
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
marcusportmanncommented, Jul 28, 2018

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

3reactions
leocaseirocommented, Nov 14, 2017

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;
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Lablel for md-radio-group - Stack Overflow
Adding a label is certainly an option, but what about its styling - does it need to be done completely from scratch? Is...
Read more >
Directives > mdRadioGroup - AngularJS Material
The <md-radio-group> directive identifies a grouping container for the 1..n grouped radio buttons; specified using nested <md-radio-button> elements.
Read more >
Radio button | Angular Material
The radio-button label is provided as the content to the <mat-radio-button> element. The label can be positioned before or after the radio-button by...
Read more >
Angular Material - Radio Buttons - Tutorialspoint
The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. The md-radio-group is the grouping container for ...
Read more >
md-radio-group - horizontal - with required validation - CodePen
1. <div ng-app="MyApp"> ; 2. <form name="form" ng-controller="AppCtrl" ng-cloak=""> ; 3 ; 4. <h2 class="md-title">Horizontal <code>md-radio-group</code> using < ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found