Angular mat-selection-list, How to make single checkbox select similar to radio button?

Question

How to make make single checkbox select from mat-selection-list. Similar to radio button which accepts one value from group of values.

Answer 1

To begin with, mat-selection-list is not suitable for a single-value selection, as it veers away from its intent:

Checkboxes in a group are non-exclusive options; more than one checkbox in a group can be checked at any given time

What you're looking for is the radio-button element itself, because semantically it stands for:

A radio button is one of a group of controls representing mutually-exclusive choices

Unfortunately Angular Material does not include a mat-radio-list component. But you can still achieve it by including a mat-radio-button inside you mat-list-item. This will provide best practice, as it denotes to the user that the list in view is intended for mutually-exclusive choices (unlike checkboxes that denote multiple-choice). And since the radio buttons are updating a single variable, you get exclusivity:

  
    
        Item {{x}}
    
  

Check a Stackblitz