Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Read-only Textarea
Read-only textarea using readOnly prop for non-editable display with selectable text and normal appearance included in form submissions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes you need to display text users can read and copy but not edit—that's readOnly territory. This React textarea uses shadcn/ui's readOnly prop keeping normal styling and focus ability while preventing typing—users can select text, copy content, even tab to it—just can't change it. Built with Radix UI accessibility and defaultValue for initial content, read-only textareas stay in form submissions unlike disabled—perfect for displaying API responses, showing calculated values, presenting terms of service, confirmation previews, or any interface where text needs visibility and copyability without editability.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Disabled Textarea
Fully disabled non-interactive state
Simple Textarea
Fully editable basic textarea
Read-only Input
Read-only single-line input
Textarea with Label
Label above textarea for context
Basic Card
Alternative for displaying static text
Code Block
Formatted read-only code display
Questions you might have
React Disabled Textarea
Disabled textarea with non-interactive state using disabled prop for read-only display with opacity-50 and cursor-not-allowed styling
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