Textarea

The textarea captures multi-line text like messages, comments, and feedback, and grows with its content as the user types. Pair it with a field for a label and description; for a single line, reach for the input.

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

Usage

Add the textarea class to a <textarea> element. It sizes itself to its content from a two-row minimum.

Class	Description
`textarea`	Add to a `<textarea>` element

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

Examples

Field

Wrap the textarea in a field with a label and description.

<div class="field">
  <label class="label" for="textarea-message">Message</label>
  <p class="field-description">Enter your message below.</p>
  <textarea
    class="textarea"
    id="textarea-message"
    placeholder="Type your message here."
  ></textarea>
</div>

Disabled

Add disabled and the textarea mutes itself and blocks interaction.

<div class="field">
  <label class="label" for="textarea-disabled">Message</label>
  <textarea
    class="textarea"
    id="textarea-disabled"
    placeholder="Type your message here."
    disabled
  ></textarea>
</div>

Invalid

Set aria-invalid on the textarea for the error state.

<div class="field">
  <label class="label" for="textarea-invalid">Message</label>
  <textarea
    class="textarea"
    id="textarea-invalid"
    placeholder="Type your message here."
    aria-invalid="true"
  ></textarea>
  <p class="field-description">Please enter a valid message.</p>
</div>

Button

Pair the textarea with a button to submit; without a visible label, give the textarea an aria-label.

<div class="grid gap-2">
  <textarea
    class="textarea"
    placeholder="Type your message here."
    aria-label="Message"
  ></textarea>
  <button class="btn">Send message</button>
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="textarea-rtl-demo" class="field w-full max-w-xs" dir="rtl">
  <label class="label" for="textarea-rtl-feedback" data-i18n="label">التعليقات</label>
  <textarea
    class="textarea"
    id="textarea-rtl-feedback"
    rows="4"
    placeholder="تعليقاتك تساعدنا على التحسين..."
    data-i18n-placeholder="placeholder"
  ></textarea>
  <p class="field-description" data-i18n="description">شاركنا أفكارك حول خدمتنا.</p>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", label: "التعليقات", description: "شاركنا أفكارك حول خدمتنا.", placeholder: "تعليقاتك تساعدنا على التحسين..." },
    he: { dir: "rtl", label: "משוב", description: "שתף את מחשבותיך על השירות שלנו.", placeholder: "המשוב שלך עוזר לנו להשתפר..." },
    en: { dir: "ltr", label: "Feedback", description: "Share your thoughts about our service.", placeholder: "Your feedback helps us improve..." },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("textarea-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
    document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
      el.placeholder = t[el.dataset.i18nPlaceholder];
    });
  });
</script>