Label for md-radio-group
See original GitHub issueBug, 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”
Issue Analytics
- State:
- Created 6 years ago
- Reactions:9
- Comments:9 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.ts.txt
A quick solution for that, is using a
mat-list
and the[mat-subheader]
, like so:Eq: https://plnkr.co/edit/k73FSy?p=preview
PS: You might need some style for your
mat-radio-group
andmat-radio-button
.