Date and time picker components should have floating label

[zoechi]

[TedSander]

@zacharydenton I remember there was a UX conversation on this. What was the outcome of that conversation?

[zacharydenton]

The current UX is that we only display a floating label when the material-date-range-picker has presets (e.g. the "This week" floating label). Is the idea here to display the currently-selected date/time as a floating label for the other components?

[zoechi]

Why would one want the value as label? The label should tell the purpose of the field like "day of birth". How is this supposed to be used to look properly within a form together with other input fields?

[TedSander]

Projects just add the label above the picker like so:

<div class="label">{{label}}</div>
<material-datepicker></material-datepicker>

This is for a couple of reasons:

• The popup animation wouldn't really work with the floating animation
• The label, and the message when a date isn't selected are usually different from our UX
• Since it doesn't need to animate we can keep the HTML of the datepicker simpler, and more lightweight for all users. The extra DOM needed for material-input floating label adds a good amount of complexity to the input widget.

For date range picker the label is baked in since it is part of a tight UX interaction with the rest of the widget.

I wasn't involved in the UX directly (we have a pretty large team that determines what these things should look like and what the interaction should be,) but for date range I think they just needed a place to tell the user what range they picked if it is a known set (last week, this month, etc.)

[zoechi]

I couldn't find styles to make custom styles look look like labels of other inputs. Also changing color when the field is active like fliating labels behave is cumbersome to build. As it's now floating labels don't make much sense, because once an input is added that doesn't provide one the UI becomes inconsistent.

[TedSander]

I'll take it as a Feature Request to have something like mdc-floating-label.

I don't see us getting to it within the next quarter or two tho sadly.

[zoechi]

It's not urgent. I have a workaround. I was just wondering how exactly the input elements are supposed to lead to a great user experience with such inconsistencies and why it doesn't cause troubles in your applications.

Providing such a label would definitely be an improvement.

[TedSander]

Haven't heard a complaint from our UX. I feel they think the floating label/focus gets in the way of popup inputs (most of the time the label is occluded during input.)

Sorry that it wasn't as seamless as you would like. As I said it hasn't come up for the popup type inputs.

[zoechi]

@TedSander no need to apologise. I just try to learn where I might have misconceptions. Thanks for your feedback!

[joo]

material-dropdown-select should have floating label or label too.