Components: [MdSelectionList] single selection (radio) option

[marshall007]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

The ability to specify whether or not the md-selection-list supports multiple value selection. I see a few different implementation options:

• Expose a multiple attribute on md-selection-list.
  
  
  
  • When present render each option as a checkbox, otherwise render as radio buttons.
  
  
  • This would be a breaking change as the current behavior is to use check boxes by default.
  
  
• Expose a type attribute on md-selection-list.
  
  
  
  • Possible values (for now) would include checkbox (default) and radio.
  
  
• Expose more specialized md-list-option components. ex md-list-radio-option.
  
  
  
  • Behavior of mixing checkbox and radio list options? Would probably be clunky.
  
  

What is the current behavior?

md-selection-list always renders each child md-list-option as a checkbox.

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

MdSelectionList is a good starting point for building generic Q&A style wizards/walkthroughs, but you are immediately limited in control over valid option selections. Having the ability to limit user selection to a single list option, presented using radio buttons, seems like it would be a reasonable extension of current behavior.

[homj]

I don't understand, why this issue is labeled as "minor".
It's a commonly used building block and shouldn't be hard to implement.

I'd suggest a different implementation though: Multiple value selection by default and single selection on demand (via an attribute, e.g. single). This would be a non-breaking change (contrary to the suggested multiple attribute).

[Kyderman]

This is an important issue.

However, you can jack the selection handler of an element and just access the list to deselect the other items. You then jack the deselection handler to not allow something to be unselected.

[gabriellupu]

As @Kyderman suggested, this would be the hacky way to achieve the radio-list behavior:

<mat-selection-list (selectionChange)="handleSelection($event)">
...
</mat-selection-list>

handleSelection(event) {
    if (event.option.selected) {
      event.source.deselectAll();
      event.option._setSelected(true);
    }
}

[Fieel]

Thanks @gabriellupu , works perfectly fine.

Should be a standard included feature though... it's so basic and useful.

[devversion]

It looks the MDC-based list does support single selection. https://github.com/material-components/material-components-web/tree/master/packages/mdc-list#single-selection-list.

We could support that in our MDC-based implementation of the list. #16255