Textarea with Floating Label for React

The Textarea has the peer class and comes before the label, so the label's peer-placeholder-shown: and peer-focus: classes apply when the Textarea is empty or focused. Empty, the label sits at top-3 in text-sm; focused or filled, it rests at the top in text-xs, and transition-all animates the move.

:placeholder-shown only matches a field that has a placeholder and no value. A single space is an invisible placeholder that makes it match while the Textarea is empty, so the label can sit inside it and float once there's text.

No. :placeholder-shown stops matching as soon as there's text, typed or set as a default value, so the label floats without any state or handler. Bind the value only if your form needs it for something else.

pt-5 keeps the first line of text below the floated label, so they never overlap. While the field is empty, the label covers that space itself, acting as the placeholder.

Yes: it's a real Label whose for points at the Textarea's id, so the field is announced with its name and clicking the label focuses it. The movement is visual only. Keep the floated label's contrast readable, since text-xs is small.

Yes. :placeholder-shown, sibling selectors and transitions work in every current browser, and nothing depends on script.