add floating label to md-select

[hodeyp]

When an md-select has a value, the placeholder should be used as a floating label to keep consistent with the md-input directive

[ruslansafronov]

Regarding to behavior of this material element, this kind of menus appear above all other in-app elements and floating labels relevant only for input elements. For more understanding look into "Do not" section in component behavior.

[marcysutton]

Actually I think it should be an option. If you look at the single-line text fields example in the design spec, there are selects with values both with and without floating labels. Perhaps an explicit <md-select-label> could float, and a placeholder attribute would not?

[hodeyp]

I'd almost suggest the other way round @marcysutton. If a placeholder is defined within the md-select this is the default value displayed when nothing has been selected. the md-select-label is used when you want to transform a key/value pair from key to value.

e.g, in a simple md-select placeholder="Country" when nothing has been selected the placeholder shows 'Country', when a value has been selected the placeholder floats and the selected value (or md-select-label) is displayed in the main content section.

[ruslansafronov]

It seems to me you're referring to the label at the top of the selected option,as shown here: Simple menus (see the "Simple menus" section)
I agree with this. But if you need a simple <label> inside the md-select, try the second example at material.angularjs.org:
<md-optgroup label="Country">

[ruslansafronov]

But anyway, you describing different element. As stated in the specification "Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. " . And floating label will not be visible until the menu is open. The element you looking for is the label and the predefined option below.

[hodeyp]

I think we may be talking at cross purposes, so here is an example. Imagine an app where a user is arranging travel and they have to select the departure and arrival countries...

Once the countries are both selected it is no longer clear to the user which is the departure and which is th arrival country as the labels (placeholders) are no longer visible...

Once an option has been selected, it would be great for the placeholder to float in the same way as the md-input-container to make it clear to users what the field is they have selected

[ruslansafronov]

In most cases, these elements have a label or icon on the sides. Or in another case, the input field that indicates the purpose of adjacent elements. The input "New York" represents value in select-box.

Speaking specifically about the material components. For those occasions when we need to show at once the category/type name and value, you must use another element which has a different look, but performs much the same function:

[sebastiengiroux]

I agree with @marcysutton that it should be an option.

When used within a form as a "select", a floating label is necessary so that it looks like other "input" element within the form.

However, when used as a "menu" (e.g.: in a toolbar), a floating label might not be necessary.

[hodeyp]

@sebastiengiroux - thanks, this is exactly what is needed. To make a form consistent it should be possible to put a floating label on the md-select directive.

One thing to highlight though with regards to @marcysutton suggestion.

the md-select-label is a great tool to transform the displayed value, I would suggest this is only ever used to display the selected value, transformed as required. The placeholder attribute on the md-select itself it the one to float as this is what describes the content of the select.

[mtraynham]

+1 Select and it's multiple variant, are common form items. It would be nice to have the consistent floating label to match inputs and 100% width. I imagine it could be accomplished by a wrapper div, similar to how the md-input-container interacts with md-input.

[ask007learning]

+1

[sebastiengiroux]

I agree with @hodeyp that "the md-select-label is a great tool to transform the displayed value".

I think that we could achieve the floating label by wrapping the "md-select" within a "md-input-container" (as mentioned by @mtraynham), and still keep the "md-select-label".

[Splaktar]

Good discussion here. We certainly need to have our selects in forms with inputs and they should be able to be side-by-side with a similar look.