Textarea

<textarea class="textarea" placeholder="Type your message here"></textarea>

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Textarea component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/textarea.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Add your textarea HTML

Add class="textarea" to a <textarea> element. Textareas inside a class="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>

Textareas support right-to-left layouts through native browser direction handling.

Examples

Field

Use field with a label and description to create an accessible textarea.

Message

Write a short message.

<div role="group" class="field">
  <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

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

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>