Checkboxes in md-select when multiple selection is possible

[FDIM]

Hi,
I am doing a rapid prototyping and I have heard multiple complains/suggestions from colleagues/clients/stakeholders that in select dropdown it is not clear when you can choose multiple items and when only one.

I propose to add a checkbox to each item for md-select[multiple]. While it is simple enough to add, it would be nice if something like this would be included in default distribution.

Result in the picture can be achieved with this less snippet:

// multi select dropdown with checkboxes
md-select-menu[multiple] {
    md-option {
        padding-left: 48px;
        &:before {
            transition: 240ms;
            position: absolute;
            top: 15px;
            left: 16px;
            width: 18px;
            height: 18px;
            border: 2px solid;
            border-radius: 2px;
            content: ' ';
            border-color: rgba(0, 0, 0, 0.54);
            z-index: 1;
        }
        &[selected] {
            &:before {
                background-color: rgba(30, 136, 229, 0.87);
                border-color: rgba(30, 136, 229, 0.87);
            }
            &:after {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                position: absolute;
                top: 17px;
                left: 22px;
                display: table;
                width: 6px;
                height: 12px;
                border: 2px solid;
                border-top: 0;
                border-left: 0;
                content: ' ';
                z-index: 2;
                border-color: rgb(255, 255, 255);
            }
        }
    }
}

Unfortunately there is more work involved to support themes.

[ahmadhsalim]

Agreed. This should be possible for md-menu too.

[sitic]

+1, I've received complaints from users about the non-obvious multiple select.

[phynweb]

Per @ThomasBurleson, moving comments from #3610 which is closed since its a duplicate of this.

---

A few ideas for enhancing the md-select directive when multiple is true. All use-cases derived from the Option Groups select demo. Codepen with multiple set to true on toppings: http://codepen.io/anon/pen/rVdzzb

1. While the current selection is quite clear for single selections since the dropdown closes on select and populates the select text with the selection, this is not the case for multiple selections. The color difference between selected and unselected items is a bit too subtle if we contemplate a large list (e.g. 100+ items). A check icon or some other visual cue would be helpful while the user scrolls through the list.
2. The current functionality adds the name of all selected items to the select text. This works well if we're selecting a few items. For a large list, it might be more useful have a multiple-placeholder option that says "100 Items selected", or simply retains the placeholder "Select items..." instead of listing every item which would create a very wide select area that ends up getting cut off i.e. losing the usefulness of listing the items anyway

Regarding item 2 above, i see it was discussed earlier here: #2684 and i agree with that logic for single md-select mode. I do think that enabling the multiple option presents a different problem of potentially confusing the user if we only display the first few options out of a large number, giving no cues as more items are selected and added to the end of option.textContent being used as the display value.

[phynweb]

@FDIM Pretty random question if you don't mind...what is the name of the font in the screenshot you posted above?

[FDIM]

@phynweb It's Zetta Sans, used according to brand guidelines :)

[phynweb]

@FDIM thanks, i might need to find a reason to use it :-)

[tejasrivastav]

+1 would be awesome

[sreekumarp]

+1 would be awesome

[mprentic-harris]

It seems like this is a duplicate/add on to #2239

[lakshmikant4u]

It would be great to see this coming in new release.!

[my9074]

The current functionality adds the name of all selected items to the select text. This works well if we're selecting a few items. For a large list, it might be more useful have a multiple-placeholder option that says "100 Items selected", or simply retains the placeholder "Select items..." instead of listing every item which would create a very wide select area that ends up getting cut off i.e. losing the usefulness of listing the items anyway

+1 This is a normal needs

[ThomasBurleson]

Related to PR #7301

[ErinCoughlan]

@my9074 Custom text, such as "100 items selected", is issue #7384

[idlethumbs]

I have created a similar result in the theme-select.scss that should respond to primary colours etc.,

this version uses the exact same check tick as is used elsewhere in the spec.
there isn't any animation on it yet though!

md-select-menu[multiple] md-option {
    padding-left:32px;padding-right: 32px;
    &[selected] .md-text:before {

        box-sizing: border-box;
         -webkit-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         left: 14px;
         display: table;
         width: 6.67px;
         height: 13.33px;
         border-width: 2px;
         border-style: solid;
         border-top: 0;
         border-left: 0;
         content: '';
    }
}