Components: MatSelectionList with Radiogroup

Created on 19 Mar 2018  路  7Comments  路  Source: angular/components

feature request

What is the expected behavior?

I would like to have a new option for MatSelectionList Component to only make one choice at a time possible.
If this option is true, the Checkboxes should become Radiocontrols.

What is the current behavior?

There is no option to make only one choice exclusive.

What are the steps to reproduce?

https://material.angular.io/components/list/overview#selection-lists
You are able to tick every single option.

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

Sometimes you would like to indicate all possible variants but the User is only able to chose one of them. In a Poll with only one valid choice for Example.

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

latest stable

Is there anything else we should know?

I currently fake the exclusive choice by unticking the whole selectionList and only tick the selected Item; The Checkboxes annoy the user as they indicate a multiple-choice-option.

P4 materiaradio feature

Most helpful comment

Indeed, @WizardPC this also applies to Checkboxes: I can use default Checkbox Component and ngFor them. It is also possible to put the RadioComponent into the <mat-list-item></mat-list-item> Tag.

A ngFor Radiogroup would not have the native design like a MaterialList and there would be a lot effort to copycat the MaterialSelectionList CSS-Rules into the handcrafted Radiogroup.

All 7 comments

You can do the same with an ngFor and classic radio input no ? Real question here 馃悪

Indeed, @WizardPC this also applies to Checkboxes: I can use default Checkbox Component and ngFor them. It is also possible to put the RadioComponent into the <mat-list-item></mat-list-item> Tag.

A ngFor Radiogroup would not have the native design like a MaterialList and there would be a lot effort to copycat the MaterialSelectionList CSS-Rules into the handcrafted Radiogroup.

I think it should also be possible to hide the checkbox or the radiobutton. If you want a single select list that forwards you to somewhere or pops a modal to edit the item you don't want any kind of selection marker.

Duplicate #10213 #7157
I'm interested in this as well

Per #8411 you should be able to use a mat-radio-button with no label as the matListIcon of a standard list. The spec says the radio buttons should be on the left side of the list, so presentation should be more or less correct in this case.

I'd like to be able to have a list with per-item icons, and radio controls, and a secondary action button on the right side. I can't find an example like this in the spec, but I also can't find anything to tell me it's not allowed, so for now I have

<mat-list> <mat-list-item> <img magListIcon ...> <mat-radio-button mat-line ...></> <button mat-icon-button ...></> </mat-list-item> </mat-list>

This actually works pretty well, except a recent regression caused the radio button's ripple to knock the mat-line out of whack any time you click it. Removing the ripple through a custom CSS rule fixes this, but I'd love to see it as a fully supported use case.

Can't the attribute RadioGroup of matRadioButton associate radio-button with radio-group?
image

Was this page helpful?
0 / 5 - 0 ratings