Short Textarea for React

The Textarea has field-sizing-content, so in browsers that support it the height follows the text and rows is ignored, and min-h-16 keeps it at least that tall. field-sizing-fixed brings back the rows height and min-h-0 removes the minimum, so three rows means three lines everywhere.

The Textarea keeps its height and scrolls, with a scrollbar once the text overflows. Keyboard and screen reader users can still reach every line. If it should grow instead, drop field-sizing-fixed and cap it with a max height such as max-h-40.

Yes, rows takes any number. Two rows still reads as a multi-line field; at one row, use an Input instead, which says single line to everyone.

The browser's resize handle stays on by default, which helps people who type more than you planned for. Add resize-none if the layout around it must not move, or resize-y to allow height changes only.

For brief text in tight spaces: a note on a card, a reply in a side panel, a short description in a settings row. For long-form writing such as articles or support requests, give people the default height or let the field grow.

Yes. Scrolling inside the field is native: arrow keys move through every line and screen readers read the whole value, not just the visible part. Give it a label; this demo, with none visible, sets aria-label.