Textarea
Displays a form textarea or a component that looks like a textarea.
<textarea class="textarea" placeholder="Type your message here"></textarea>Usage
Add the textarea class to a <textarea> element. Textareas inside a form or field container also receive the same styling automatically.
Use native HTML attributes for behavior: disabled for disabled textareas and aria-invalid="true" for invalid state styling.
<textarea class="textarea" placeholder="Type your message here"></textarea>Examples
Field
Use field with a label and description to create an accessible textarea.
Write a short message.
<div role="group" class="field w-full max-w-xs">
<label for="textarea-field">Message</label>
<textarea id="textarea-field" placeholder="Type your message here"></textarea>
<p>Write a short message.</p>
</div>Disabled
<textarea class="textarea" placeholder="Type your message here" disabled></textarea>Invalid
Message is required.
<div role="group" class="field w-full max-w-xs">
<label for="textarea-invalid">Message</label>
<textarea class="textarea" id="textarea-invalid" placeholder="Type your message here" aria-invalid="true"></textarea>
<p>Message is required.</p>
</div>Button
<div class="grid w-full max-w-xs gap-3">
<textarea class="textarea" placeholder="Type your message here"></textarea>
<button type="submit" class="btn">Submit</button>
</div>Form
<form class="w-full max-w-sm space-y-6">
<div role="group" class="field">
<label for="textarea-form">Bio</label>
<textarea id="textarea-form" placeholder="Tell us a bit about yourself"></textarea>
<p>You can @mention other users and organizations.</p>
</div>
<button type="submit" class="btn">Submit</button>
</form>RTL
Textareas support right-to-left layouts through native browser direction handling. Add dir="rtl" to the textarea, field, or an ancestor.
شاركنا أفكارك حول الخدمة.
<div role="group" class="field w-full max-w-xs" dir="rtl">
<label for="textarea-rtl">التعليقات</label>
<textarea id="textarea-rtl" placeholder="تعليقاتك تساعدنا على التحسين..." rows="4"></textarea>
<p>شاركنا أفكارك حول الخدمة.</p>
</div>