Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Required Textarea
A form textarea with required field indicator showing red asterisk next to label for mandatory multi-line input fields
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Nothing frustrates users more than submitting a form only to discover they missed required fields. This React textarea pattern adds a red asterisk next to the label using text-destructive and the required attribute. Built with shadcn/ui Label and Textarea components, the visual indicator makes mandatory fields obvious before submission—perfect for feedback forms, message fields, support requests, comment sections, or any multi-line input where you need clear required field communication upfront.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Textarea with Helper Text
Textarea with contextual help text below input
Textarea with Error
Textarea showing validation error state and message
Required Input
Single-line input with required field indicator
Character Count Textarea
Textarea with live character counting display
Form Validation
Complete form with validation patterns
Form Labels
Label component patterns for form fields
Questions you might have
React Tabs with Icons
Tabs component with Lucide React icons paired with text labels in TabsTrigger for visual category identification and improved scannability
React Textarea with Helper Text
A textarea with helper text below providing contextual guidance about field purpose or visibility in text-muted-foreground