Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Field - Textarea with Helper Text Above
A React textarea field with helper text description placed above the input showing markdown support instructions built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Critical textarea instructions belong before the field, not after. This React textarea places FieldDescription above with Provide a detailed description. Markdown is supported guidance users see before typing. Built with shadcn/ui with rows equals 6 for longer content and description-first ordering, it's perfect for technical fields, documentation forms, or any textarea where format requirements or special features need upfront visibility.
Provide a detailed description. Markdown is supported.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Textarea
Basic textarea without instructions
Textarea with Description
Helper text below textarea
Textarea with Character Count
Live character counter
Input with Description Above
Single-line with instructions above
Textarea with Detailed Instructions
Longer instruction text
Form Dialog
Modal with textarea instructions
Questions you might have
React Field - Textarea with Character Count
A React textarea field with live character counter showing current length versus maximum limit using controlled state built with shadcn/ui
React Field - Multiple Textareas - Different Sizes
A React form with multiple textarea fields sized differently using rows for short notes, medium comments, and long essays built with shadcn/ui