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 angular/angular#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

[k-krupka]

Bumping this one up. Much desired.