Textarea
The Textarea component allows users to enter multi-line text. It supports labels, error messages, and a disabled state.
Default
Basic textarea with label and placeholder text.
<Textarea id="usecase" label="Label" placeholder="Placeholder text..." />Custom height
You can override the default height using the
height prop.<Textarea id="story" label="Your story" placeholder="Tell us your story..." height="h-[10rem]" />Error
Display an error message below the textarea.
Feedback is required.
<Textarea id="feedback" label="Feedback" placeholder="Enter your feedback" error="Feedback is required." />Disabled
Make the textarea non-interactive.
<Textarea id="notes" label="Notes" placeholder="You can't type here" disabled />Accessibility
The textarea includes an accessible label, visible focus ring, and supports keyboard navigation.