# How to fix Ionic floating label with border input

**URL:** <https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914>\
**Category:** ionic-v3\
**Created:** [May 15, 2019, 6:26am UTC](https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914 "2019-05-15T06:26:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sanoobdesign](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@sanoobdesign](https://forum.ionicframework.com/u/sanoobdesign)\
**Post date:** [May 15, 2019, 6:26am UTC](https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914/1 "2019-05-15T06:26:35Z")

</div>

I need to make (ion-label floating) same like below screenshot in my ionic4 project.  
please advice me.  
 ![Floating%20label](https://global.discourse-cdn.com/ionicframework/original/3X/1/f/1fc7cbee9a8483248bdda0e4734a420fe69f1b96.png)

Here is the link what i am looking  
[https://www.freakyjolly.com/gmail-login-input-field-style/](https://www.freakyjolly.com/gmail-login-input-field-style/)  
This is my current code

```auto
<ion-item>
    <ion-label position="floating">Floating Label</ion-label>
    <ion-input formControlName="password" id="password" type="password"></ion-input>
  </ion-item>

```

---

<div class="post-metadata">

**Author:** ![sanoobdesign](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@sanoobdesign](https://forum.ionicframework.com/u/sanoobdesign)\
**Post date:** [May 15, 2019, 6:49am UTC](https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914/2 "2019-05-15T06:49:13Z")

</div>

![image](https://global.discourse-cdn.com/ionicframework/original/3X/f/d/fd29da89c4d629bbb8918eafa7f4717d1aea1646.png)  
Looking same as it is.

---

<div class="post-metadata">

**Author:** ![sonicwong](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sonicwong](https://forum.ionicframework.com/u/sonicwong)\
**Post date:** [May 15, 2019, 9:19am UTC](https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914/3 "2019-05-15T09:19:25Z")

</div>

You can get the input is on/out focus by this code.

```auto
<ion-input (ionBlur)="inputBlur()" (ionFocus)="inputFocus()"></ion-input>

```

---

<div class="post-metadata">

**Author:** ![sanoobdesign](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@sanoobdesign](https://forum.ionicframework.com/u/sanoobdesign)\
**Post date:** [May 15, 2019, 9:37am UTC](https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914/4 "2019-05-15T09:37:27Z")

</div>

> [@sonicwong](#):
>
> \<ion-input (ionBlur)=“inputBlur()” (ionFocus)=“inputFocus()”\>

Getting this error.

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/4/a4ffdbddbfc8d07417416264336ae5dfb90ad639.png)

---

<div class="post-metadata">

**Author:** ![ChrisGriiffith](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chrisgriiffith/32/66576_2.png) [@ChrisGriiffith](https://forum.ionicframework.com/u/ChrisGriiffith)\
**Post date:** [May 15, 2019, 3:47pm UTC](https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914/5 "2019-05-15T15:47:37Z")

</div>

You need to have those functions defined in your component code.

---

<div class="post-metadata">

**Author:** ![yeshwanthmn](https://avatars.discourse-cdn.com/v4/letter/y/ea5d25/32.png) [@yeshwanthmn](https://forum.ionicframework.com/u/yeshwanthmn)\
**Post date:** [November 27, 2019, 10:46am UTC](https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914/7 "2019-11-27T10:46:41Z")

</div>

can you give me a example

---

<div class="post-metadata">

**Author:** ![ng22792](https://avatars.discourse-cdn.com/v4/letter/n/5e9695/32.png) [@ng22792](https://forum.ionicframework.com/u/ng22792)\
**Post date:** [June 9, 2021, 6:43am UTC](https://forum.ionicframework.com/t/how-to-fix-ionic-floating-label-with-border-input/163914/8 "2021-06-09T06:43:43Z")

</div>

@yeshwanthmn Hey any update on this? Looking for the same design! anything will help 🙂