Feature Request: Floating Labels

[imcodingideas]

I want to add a feature request! I would like to see floating labels be incorporated into bootstrap 4. Please take a look at this dribble shot: https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction which shows this in action as well as some pros for it:

User keeps context
The main advantage of this pattern is that the user keeps the field’s context after they’ve focused and entered a value. This provides for a more accessible, less frustrating experience.

Clean and scannable by default
This pattern allows for a clean inline label experience by default, and only becomes a little more cluttered once the user has filled things out.

Elegant
It needs to be said: this pattern is sexy. You usually can’t say that about forms. It looks good and the animations are a nice subtle touch.

Google uses floating labels in their material design: https://material.google.com/components/text-fields.html#text-fields-floating-labels and designers love them: https://dribbble.com/search?q=floating+label

Here is a live example http://mrlopez.me/bootstrap-floating-labels/ someone else did with bootstrap.

[IamManchanda]

+1 Here is the working example ( fiddle ) with bootstrap for the same
--> http://jsfiddle.net/RyanWalters/z9ymd852/

[Herst]

@IamManchanda Interesting, but I don't think differentiating between the label and placeholder text is a good idea.

[IamManchanda]

Why not .... label and placeholder are two different species i guess

for eg.

Label: Your Name 
Placeholder: Enter Name here 

But yeah if you dont want it no issue just safely remove placeholder's from the code
like this here --> http://jsfiddle.net/pLzqy9mn/

[leovafme]

Alternative with pure css

http://jsfiddle.net/g094quoc/

[patrickhlauke]

i wouldn't mind a (CSS only) solution for this, though it will need to be made clear that the construct will likely require a very specific set/order of markup, and that the component needs enough top padding to allow for the label to then float up when field is focused or contains actual value.

[aardrian]

I have one I have been playing with on and off for a while now, but it does not work properly in Edge (labels start floated) nor IE (placeholder is shown too soon): https://codepen.io/aardrian/pen/MeeZrQ

I am working on a simplified block of code for a blog post (removes the radio/checkbox, gets rid of validation experiments, etc), but it won't be ready for a bit owing to Reasons.

The key approach, IMO, is to create good, valid, accessible mark-up first, and only then fold in the styles (and possibly) script to achieve what you want.

[archatas]

The floating-labels example works very nicely - I appreciate for how smothly the placeholder turns into a label placed above the field. But it would be even better, if the label was listed before the input field in the markup. It would add value for semantics and accessibility.

I tried to exchange the fields and hack the CSS to create an example, but I guess there are better CSS masters here than me.

[patrickhlauke]

as CSS doesn't have any way to "go back" to style a preceding element, unfortunately we're stuck with this order.

[Ruffio]

I was thinking of using the floating label on my website, but it appears to have been changed :-(

4.0 (https://getbootstrap.com/docs/4.0/examples/floating-labels/):

4.1 (https://getbootstrap.com/docs/4.1/examples/floating-labels/):

Actually I think that the changes happened when 4.1.3 was released and a fixed height of 38px was introduced as it goes from 50px (calculated) to 38px (set):

[mdo]

Ah, this is the height stuff I did. Can you open a new issue for this @Ruffio?

[micka-fdz]

Hello, any news about this feature request? Maybe an implementation in v5?

[StayCoolDK]

I agree that this would be a nice feature for v5 - what would be the issue in making https://getbootstrap.com/docs/4.4/examples/floating-labels/ a part of v5? Seems to have decent support.

[mdo]

I should be able to pull in https://getbootstrap.com/docs/4.4/examples/floating-labels/ and make it a legit component of Bootstrap now that we've dropped IE11. However, the classic Edge doesn't support this exactly. It doesn't break anything, but only the new MS Edge built on Chromium works as intended.

[mdo]

See #30449, which is also adding support for <select>s.

[tkrotoff]

I've implemented floating labels for Bootstrap 4 here: https://github.com/tkrotoff/bootstrap-floating-label