Ionic Input Fields with Floating Labels and Icons Both

Ionic Framework using AngularJS 1 is having some different type of input field styles like:

1) Placeholder Labels
2) Inline Labels
3) Stacked Labels
4) Floating Labels
5) Inset Forms
6) Input Icons

Documentation for these can be found here

But the style which I was looking for was a merge of both Floating labels plus Input Icons. There was not a way to use a blend of these anywhere. But after some CSS tweaking, I managed to achieve the piece I was looking for

Let’s start …

Here we will take an example of Login form having Username and Password inputs

For Foating Labels we add following Ionic HTML



For adding input labels we use the following code


Now if we merge both it will look a bit distorted 

To make it look decent we will add a custom class and some CSS style.
Add “custom-login-label” class on label and CSS style


Final HTML will look like this 




It’s Done now you have Ionic input with both floating labels and Icons in it .

Leave a Reply

Notify of