# How to reuse floating labels?

**URL:** <https://forum.ionicframework.com/t/how-to-reuse-floating-labels/236761>\
**Category:** Ionic Framework\
**Created:** [October 4, 2023, 11:31am UTC](https://forum.ionicframework.com/t/how-to-reuse-floating-labels/236761 "2023-10-04T11:31:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ng-Chris](https://avatars.discourse-cdn.com/v4/letter/n/a88e57/32.png) [@ng-Chris](https://forum.ionicframework.com/u/ng-Chris)\
**Post date:** [October 4, 2023, 11:31am UTC](https://forum.ionicframework.com/t/how-to-reuse-floating-labels/236761/1 "2023-10-04T11:31:45Z")

</div>

Greetings! I’m using `"@ionic/angular": "7.4.1"` and need your advice.

Almost every Control in my form supports floating labels (ion-input, ion-checkbox, ion-select, etc), but I have one special/custom Control which should also blend in. How can I integrate ionic floating labels? are there some css-classes which I can reuse? or Providers? Or other API’s?

(side note: since upgrading to v7 I’m forced to use the experimental `<ion-text slot="label" color="medium">` because both label and value use the same `--color` variable)

---

<div class="post-metadata">

**Author:** ![mherbertecifm](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mherbertecifm](https://forum.ionicframework.com/u/mherbertecifm)\
**Post date:** [February 3, 2025, 5:08pm UTC](https://forum.ionicframework.com/t/how-to-reuse-floating-labels/236761/2 "2025-02-03T17:08:14Z")

</div>

did you find a solution?

---

<div class="post-metadata">

**Author:** ![ng-Chris](https://avatars.discourse-cdn.com/v4/letter/n/a88e57/32.png) [@ng-Chris](https://forum.ionicframework.com/u/ng-Chris)\
**Post date:** [February 12, 2025, 11:17am UTC](https://forum.ionicframework.com/t/how-to-reuse-floating-labels/236761/3 "2025-02-12T11:17:57Z")

</div>

not a good one. I mimicked the floating label:

```scss
:host {
  .input-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-top: calc($floating-font-size * 1.2 + $padding-top);
    min-height: utils.pxToRem(34); // 18 span + 2 * 8 inner padding

    > span {
      margin-right: 4px;
    }
  }

  label {
    position: absolute;
    inset: 50% 0 auto 0;
    color: var(--ion-color-medium, #92949c);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  &.has-value label, &.input-has-focus label {
    inset: $padding-top 0 auto 0;
    transform: translateY(0);
    font-size: $floating-font-size;
  }
}

```

it looks as desired but I would recommend to look into Ionics GitHub and take their css rules instead