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.

[MdSelectionList] single selection (radio) option

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:28
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

29reactions
gabriellupucommented, Apr 5, 2018

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);
    }
}
13reactions
homjcommented, Oct 23, 2017

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).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Single selection without radio buttons? · Issue #205 - GitHub
Is there a way to accomplish single-selection without showing the radio buttons? My purpose is to have all my "selects" (single-selection ...
Read more >
I have two radio buttons where single selection is to be ...
Where a single selection is working but I am using modal class to store value captain and vice-captain like true for the captain...
Read more >
Radio Button single selection | Blazor Forums - Syncfusion
We can make the radioButton grouping by using the name property. We can be able achieve your requirement by assigning different name to...
Read more >
Selection Controls - KivyMD's documentation - Read the Docs
Selection controls allow the user to select options. ... KivyMD provides the following selection controls classes for use: MDCheckbox. MDSwitch ...
Read more >
Custom Field > Radio Button or Select List Single Choice
When creating a custom field with a radio button or select list single choice, the field appears with a value of 'NONE' that...
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