Textarea with Inline Label for React

The horizontal Field centers its children, which suits a three-row Textarea. For a taller one, add items-start to the Field so the label lines up with the first line of text.

w-20 gives the label the same width on every row, so a stack of inline fields starts its controls at one edge. Widen it to fit your longest label.

The Field's own gap, as here, keeps the label and field visibly apart but paired. Change it with a gap-* class on the Field and use the same value on every row.

In settings panels and admin forms with many short fields, where rows scan faster than stacks. On narrow screens and for long labels, put the label above; orientation set to responsive switches between the two with the container's width.

The Textarea normally grows with its content from min-h-16. field-sizing-fixed makes it honor rows, and min-h-0 lets it be shorter than the minimum, so it stays three lines tall and the row keeps its alignment.

Three to five. Fewer, and an Input is the better control; more, and the label floats beside a tall box, so stack the label above instead.