Join & outline => Input prefix & suffix

[jycouet]

I would like to use join to create Input with prefix & suffix, something like this:

Enregistrement.de.l.ecran.2024-01-11.a.20.56.49.mov

To do so, I removed border, but didn't manage to have the "full" outline.
I used something like this:
https://play.tailwindcss.com/l0nXk0rn4s

<div class="p-4">
  <div class="join flex"> <!-- with a global `outline-2`? -->
    <div>
      <div>
        <input type="number" class=" input join-item input-bordered border-r-0 text-right" placeholder="Value..." value="1234.23" />
      </div>
    </div>
    <div>
      <div>
        <div class="input join-item input-bordered grid items-center border-l-0">€</div>
      </div>
    </div>
  </div>
</div>

I'm I missing something? Could I manage it on my side? Or DaisyUI could provide something? :)

[saadeghi]

I would do something like this:
https://play.tailwindcss.com/8hEY0E6bXI

<label class="input input-bordered inline-flex items-center">
  <input type="number" class="h-full text-end" placeholder="Value..." value="1234.23" />
  €
</label>

The input class is not necessarily for <input> element. It just gives the style, so we can use it for the parent instead since we want a € next to the <input>

[jycouet]

OMG, that's just too easy! Thx a lot