Shadcn Textarea
React textarea for comments, bios, and feedback. Built with TypeScript and Tailwind CSS for Next.js using Base UI — labels, invalid state, and a send button.
The shadcn textarea is a native <textarea> with the same border and focus ring as Input. Type and the height follows the text. Use it for comments, bios, and support messages — anything that does not fit on one line.
Looking for a neobrutalism version for shadcn?
Same textarea, thicker borders. The NeoBrutalism textarea is the kit if you want that look.
Usage
import { Textarea } from "@/components/ui/textarea"<Textarea placeholder="Type your message" />disabled greys it out. aria-invalid is the red border.
Composition
Pair it with Field for the label, hint, and error.
Field
Field, FieldLabel, and FieldDescription — the label, the box, and the hint.
Disabled
disabled on the textarea. data-disabled on Field so the label greys out with it.
Invalid
aria-invalid on the textarea. data-invalid on Field so the label goes red too.
Button
A Button under the box. Send, comment, post.
RTL
Wrap with DirectionProvider and dir="rtl". Labels stay Arabic.
API
Prop
Type
Every native <textarea> prop works — value, defaultValue, onChange, name, maxLength, rows.
Notes
Invalid needs two attributes
aria-invalid on the textarea, data-invalid on the Field. One without the other leaves the control or the label unstyled.
field-sizing-content grows the box with the text. Cap it with max-h-* if the form should stay put.
With other components
Label, hint, and error
LabelName the box
FormValidate on submit
ButtonSend under the box
Input GroupActions on the field
CardComment in a card
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Tabs
React tabs for settings screens and dashboard views. Built with TypeScript and Tailwind CSS for Next.js using Base UI — one panel at a time, keyboard navigation.
Toast
React toast for save confirms, undo, and async status. Built with TypeScript and Tailwind CSS for Next.js using Base UI — stacked, swipe to dismiss, promise states.