Text field with fixed label; no animation when the input field on focus

[scarletsky]

In fact, what I want is like this:

It seems that I can not use <label> tag because of the animation. I can just work around with other tag like <p>, <div>.

<material-input-group class="material-input-group-theme-light" layout="horizontal">
    <p flex="30">123123</p>
    <material-input type="text" 
                    ng-model="user.fullName"
                    flex="70"
                    style="display: inline-block;"
                    placeholder="please input something"></material-input>
</material-input-group>

For the semantic of HTML, I think it will be better if we support a way to remove the label animation.

[ThomasBurleson]

Very interesting and often missed aspect of component - UX with error states.
Can you explain more what you mean "cannot use <label> tag due to animation ?

[scarletsky]

@ThomasBurleson
It means I don't need the focus animation if I use the layout above. But if I use <label> tag in <material-input-group>, the animation will trigger.

I think we can add .no-label-animation in https:/angular/material/blob/master/src/components/form/_form.scss , so when I don't need the label animation, I can add .no-label-animation class to the <material-input-group>.

[jnishiyama]

@scarletsky I simply use a placeholder to get around the animation issue, works like a charm (needs some styling done though). It does seem like it could be useful to have a no animation class on the label...

[ThomasBurleson]

Please note that the current Text Field component is a Floating Label component that is specified (by Material Design) to have a hint/label animation. There are several other implementations of Text Field that will be arriving in the near future (some without animation).

BTW - it appears that the workarounds above - perhaps suitable for your needs - are changing the way Floating Label Text fields should work.

[WillsB3]

+1 to this. I also need a regular (non-floating-label) text field.