Input field with floating label and icon


I feel like this is an extremely typical case i guess there is some out-of-the-box solution.

How do i properly set the in Input field with floating label and icon (icon as a placeholder) ?

Now tried:

 <ion-list class="items-middle" text-center>
      <ion-label color="ligh-grey" floating><ion-icon item-left name="mail"></ion-icon>Email</ion-label>
      <ion-input type="email"></ion-input>
      <ion-icon item-left name="lock"></ion-icon>
      <ion-label color="ligh-grey" floating>Password</ion-label>
      <ion-input type="password"></ion-input>
    <ion-buttons padding-top>
      <button ion-button full round>Login</button>

1st case (email input) - icon is in the label. works well for androind & ios, but broken for windows.
2nd case (pass input) - problem for all devices - elements vertical align. simple css tricks didn’t help.

Thank you.

Hey I am not an expert but here is my interpretation of the code.

Case 2: The float tag is only applied to the label so the icon is stuck where it is.
Case 1: is the right approach.

Then again. The I tried the code on plunker. I see a problem here.
Float tag and placeholder don’t go together (tag and the placeholder sort of are on top of each other in my plunker code. )

You could use the label as stacked and have a icon placeholder. To do the icon placeholder take a look at this page.


actually not very similar case.

Still have this problem. Any suggestion on right solution?

1 Like

Try this,

  <ion-label position="floating">
    <ion-icon item-left name="mail"></ion-icon>
  <ion-input ></ion-input>