[FEATURE] Floating input with appended/prepended text

[morsik]

Hi,

so, we have nice "Floating inputs" component (originally Bootstrap-provided):

as well as we have nice "Inputs with prepended/appended text" (also originally Bootstrap-provided):

The idea:

Both are great, but what about making mix of both of them as a custom component? I tried to play around with making appended text to input with floating label, but wasn't able to so it's clear that it's just not supported (as it's not anywhere in examples nor documentation).

So the idea is simple, Floating input should be "as is", but lower part where the input is, should be able to use all those "prepended/appended components" inside lower part.

The only way I was able to achive something similar to what I have is this code below, but this have broken vertical alignment of appended text as well as label part is broken (clicking on label causes it to disappear as it's underneath):

<div class="form-floating input-group input-group-flat">
  <input type="text" name="tt" id="tt" class="form-control text-end pe-0" value="25" autocomplete="off">
  <span class="input-group-text">
    °C
  </span>
  <label for="tt">Temperature</label>
</div>

Feature like this may make things even more nicer are well are more tight.

[github-actions]

This issue is stale because it has been open for 360 days with no activity.

[morsik]

@codecalm hey! Any ideas about this? ;)