Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Short Textarea
Compact textarea with rows={3} and min-h-0 limiting height to three lines for space-efficient multi-line input in dense layouts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Vertical space is precious—especially in dense dashboards, sidebars, or mobile interfaces. This React textarea uses rows=3 with min-h-0 to create a compact three-line input field using shadcn/ui and Radix UI—exactly three visible lines, scrolls if content exceeds, no expansion beyond bounds. Perfect for quick notes, brief comments, short descriptions, inline editing, chat messages, feedback forms, or any interface where you need multi-line capability without sacrificing vertical real estate—controlled height, predictable layout.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Textarea
Default height multi-line textarea
Inline Label Textarea
Horizontal label with compact textarea
Simple Input
Single-line text input alternative
Textarea with Label
Label above textarea
Compact Card
Space-efficient card layout
Sidebar Form
Dense form in narrow sidebar
Questions you might have
React Read-only Textarea
Read-only textarea using readOnly prop for non-editable display with selectable text and normal appearance included in form submissions
React Small Toggle Group
A small toggle group with size sm and type multiple for compact text formatting toolbars with outline variant styling