Components: checkbox group

[mbeckenbach]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Similar to the multiple select, it should be possible to have a list of check boxes to select multiple options returned in a single array of choices. A required validator would check for at least one selection.

What is the current behavior?

Has to be made via select or custom logic.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

Need it quite often for my projects. Sometimes a select drop down is not what customers wish for a multiple selection. Sometimes it is better to see all options without having to open a menu.

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

Ng4.1.x, MD beta 6

Is there anything else we should know?

[crisbeto]

I believe that you're looking for a radio group, which is supported already.

[jelbourn]

Not sure this is common enough of a pattern to warrant including in Angular Material

[lobo-tuerto]

I think this is common enough, I have had to create some custom checkbox-list inputs before.

@crisbeto The difference with the radio group is that you can't have more than 1 selected item, this covers it.

[gseabrook]

I'd agree this is a pretty common use case, particularly once the data table is ready, as selecting items from a table happens all the time. Its also on the demo page for Material 1 under the syncing section (https://material.angularjs.org/latest/demo/checkbox)

[Toub]

This is a common use case, exactly as radio and select ones.
Related to https://github.com/angular/angular/issues/10948

[Edit] current workaround inspired from https://stackoverflow.com/questions/42509454/angular2-formarray-with-checkboxes

Define a FormGroup, containing one control per possible value:

checkboxGroup = new FormGroup({});

checkboxPossibleValues.forEach(value => {
   checkboxGroup.addControl(value, new FormControl(checkedValues.indexOf(value) !== -1));
});

<div [formGroup]="checkboxGroup" *ngFor="let value of checkboxPossibleValues">
   <md-checkbox [formControlName]="value">{{ value }}</md-checkbox>
</div>

[deanchalk]

I would like to build this and add it to angular material as a community contribution. is this possible (I've not contributed to a community project before - so forgive my ignorance). I have read and understood the community contribution guidelines

[jelbourn]

@deanchalk what do you imagine this would look like?

[deanchalk]

Im imagining a checkbox container component that exposes a value property and valuechanged event. The child checkbox components could have a custom directive to allow a value to be associated with each one, and then the checkbox container will emit the valuechanged event whenever any of the checkboxes change their checked state and the value will be an array of the value's of all of the checked checkboxes.

This kind of component will be useful in forms where you want to capture a value that is an array of values (like a list of choices etc)

[jelbourn]

How is that different from the existing mat-selection-list?

[deanchalk]

you're right, I hadn't thought about it that way. I'll find another issue as a possible way of making my first contribution - thanks

[xagon]

Bumping this one up. Much desired.

[Dimasik11]

bumping. i i thibk is desired.

[Londovir]

@jelbourn mat-selection-list (at least, as demonstrated on the Material 2 components list) seems to have a few issues that make it dissimilar to what is discussed here.

First, the appearance of the checkbox on the demo is automatically placed on the far right edge of the list item. This doesn't appear to agree with the most recent Google Material Design spec, specifically Lists: Controls, which show checkboxes as a primary action/state on the left edge.

Second, it appears that mat-selection-list does not have defined value accessors, and therefore does not support ngModel or reactive forms. This makes it more unsuitable/"unfriendly" for use in forms, which is certainly a defined use-case of multiple selection checkbox units per Selection controls.

[crisbeto]

The selection list definitely has a value accessor @Londovir, have you run into any particular issues with it?

[Londovir]

@crisbeto My apologies - I was looking at the API documentation on the Angular Material website, along with the example mat-selection-list shown there (the one with the shoe types). I then forked the stackblitz example from there and attempted to add both [(ngModel)] and [formGroup] style binding, at it would not work. I must assume that is because the stackblitz used on the official documentation site is using 5.0.0-rc.3 (took me a while to notice that), and ngModel binding wasn't supported until the full 5.0.0 release. Looks like the API docs could use a little refreshing, and the stackblitz could use an upgrade to 5.0.0 as well and all would be well.

[danwellman]

The problem is that it doesn't appear that the select list can be validated as a group - if you assign a custom validator to a select list, the validator will only be invoked with individual checkboxes within the list, when an individual list item loses focus. This is confusing and inconsistent with other Material controls.

What would be more useful is if the validator was invoked for the list of checkboxes whenever the checked state of any checkboxes within the list changes, when the list as a whole loses focus.

[jelbourn]

"Bumping" is not a thing. It only spams the maintainers.

[VamsiDharmaji]

mat-selection-list with checkbox is not ADA friendly

[Chembeti]

As people have mentioned, having a check-box-group is much required. In my current project, I am using template forms and generate a set of either radio buttons or check boxes. Until those sets were generate at run time and user took some action, I won't know what user selection was. I could use select list with check-boxes but that's not the right thing because we need to show all options very clearly to user (imagine you are taking an exam that contains a MCQ either with single answer or multiple answers possibility)
I could also use ViewChild but I would like to do less DOM reading in my component.

[ravidannani]

Hi, Do we have an checkbox-group similar to radio-button-group? Please let me know.

[tommueller]

@ravidannani have a look at the selection lists

[ravidannani]

@tommueller Thanks for your reply. I actually need some kind of checkbox-group only (should be similar to radio-button-group). not selection lists. do you have a way to do that?

[VenkatakrishnaNelapati]

@ravidannani check this StackOverflow question: https://stackoverflow.com/questions/40927167/angular-2-reactive-forms-array-of-checkbox-values

[tommueller]

@ravidannani A selection list is exactly like a radio group but with checkboxes, not sure what you do not like about it?!

[christianlundberg]

This feature definitely needs to be implemented. Even Material for Angularjs has it.

A selection list is simply not enough because you shouldn't be restricted to showing multiple checkboxes in a list. What if I want to render them in a row like radio buttons? Not to mention you can't even pick which side the checkbox should appear on.

[worthy7]

Has anyone considered simply adding an option to the <mat-select multiplewhich shows it inline and expanded instead of a dropdown?
https://material.angular.io/components/select/overview#multiple-selection

It would just mean creating a directive which edits the style - I think?

[danieldanielecki]

For my case this worked really fine: https://stackblitz.com/angular/eblgorgoedn?file=app%2Flist-selection-example.ts

[tommueller]

@danieldanielecki The selection list works fine, but is not a proper Angular Form Element, so you cannot use it in Angular Forms ootb.

[danieldanielecki]

"ootb"?

Was able to integrate it quite easily using reactive forms into contact form.