Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Disabled Textarea
Disabled textarea with non-interactive state using disabled prop for read-only display with opacity-50 and cursor-not-allowed styling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Need to show text content users can't change? Disabled state is your answer—grayed out, non-interactive, clearly unavailable. This React textarea uses shadcn/ui's disabled prop applying opacity-50 and cursor-not-allowed automatically—signaling to users this field isn't editable right now. Built with Radix UI accessibility attributes, disabled textareas stay in DOM for screen readers but prevent interaction—perfect for loading states, insufficient permissions, conditional fields, form previews, or any interface where you need to display multi-line text without allowing edits.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Textarea
Basic interactive textarea
Read-only Textarea
Read-only with selectable text
Disabled Input
Disabled single-line input
Textarea with Label
Label above textarea
Disabled Button
Non-interactive button state
Disabled Switch
Disabled toggle control
Questions you might have
React Simple Textarea
Basic textarea with placeholder for multi-line text input using standard shadcn/ui styling with no additional configuration
React Read-only Textarea
Read-only textarea using readOnly prop for non-editable display with selectable text and normal appearance included in form submissions