Skip to component content

Use multiline input with Bootstrap-native textarea semantics for status notes, messages, and review context.

Give reviewers enough context to act without opening another view.

Usage

Use .form-control on <textarea> for multiline values such as notes, messages, summaries, and review context. Pair it with a visible label, choose a starting rows count that matches the expected amount of writing, and keep placeholder text as an example rather than a replacement for the label.

Place helper or error text directly below the textarea and connect it with aria-describedby. Use validation state on the native control, and keep constraints such as required, disabled, readonly, maxlength, or minimum guidance close to the field.

Keep Textarea for short to medium plain text. If users need rich formatting, attachments, comments, or long-form editing, move them to a larger editor surface rather than stretching a form textarea into a document editor.

Basic

Pair the control with visible labels and helper text when it needs accessible context and predictable spacing.

Textarea
Capture concise context so teammates can pick up the request quickly.
<div class="field-group">
  <div class="field">
    <label class="form-label" for="textarea-basic-message">Message</label>
    <textarea class="form-control" id="textarea-basic-message" rows="3" placeholder="Describe the action in one short paragraph." aria-describedby="textarea-basic-message-help"></textarea>
    <div class="field-description form-text" id="textarea-basic-message-help">Capture concise context so teammates can pick up the request quickly.</div>
  </div>
</div>

Disabled

Use disabled for controls that must stay visible but cannot be edited yet.

Textarea
Keep this note read-only while the automation sync is running.
<div class="field-group">
  <div class="field">
    <label class="form-label" for="textarea-disabled-message">Message lock</label>
    <textarea class="form-control" id="textarea-disabled-message" rows="3" placeholder="Editing is currently disabled." disabled aria-describedby="textarea-disabled-message-help"></textarea>
    <div class="field-description form-text" id="textarea-disabled-message-help">Keep this note read-only while the automation sync is running.</div>
  </div>
</div>

Invalid

Show invalid state with aria_invalid and a helper/error pair for clear, accessible feedback.

Textarea
Summaries should include at least one concrete step to reproduce.
This field is required before an issue can be submitted.
<div class="field-group">
  <div class="field">
    <label class="form-label" for="textarea-invalid-message">Issue summary</label>
    <textarea class="form-control is-invalid" id="textarea-invalid-message" rows="3" placeholder="Paste the failing message here." aria-invalid="true" aria-describedby="textarea-invalid-message-help textarea-invalid-message-error"></textarea>
    <div class="field-description form-text" id="textarea-invalid-message-help">Summaries should include at least one concrete step to reproduce.</div>
    <div class="field-error invalid-feedback" id="textarea-invalid-message-error">This field is required before an issue can be submitted.</div>
  </div>
</div>

Button

Connect a compact textarea to a form action when composition needs a quick send step.

Textarea
<div class="field-group">
  <div class="field">
    <label class="form-label" for="textarea-button-message">Message</label>
    <textarea class="form-control" id="textarea-button-message" rows="4" placeholder="Type your note before sending."></textarea>
  </div>
  <button class="btn btn-primary w-100" type="button">Send message</button>
</div>

RTL

Use the same labeled textarea + helper structure with text direction and language adapted per locale.

اكتب ملاحظة واضحة حتى يتمكن فريق الدعم من اتخاذ إجراء سريع.
<div dir="rtl">
  <div class="field-group">
    <div class="field">
      <label class="form-label" for="textarea-rtl-arabic">رسالة</label>
      <textarea class="form-control" id="textarea-rtl-arabic" rows="3" placeholder="اكتب رسالتك هنا." aria-describedby="textarea-rtl-arabic-help"></textarea>
      <div class="field-description form-text" id="textarea-rtl-arabic-help">اكتب ملاحظة واضحة حتى يتمكن فريق الدعم من اتخاذ إجراء سريع.</div>
    </div>
  </div>
</div>
כתוב הערה ברורה כדי שצוות התמיכה יוכל לפעול מהר.
<div dir="rtl">
  <div class="field-group">
    <div class="field">
      <label class="form-label" for="textarea-rtl-hebrew">הודעה</label>
      <textarea class="form-control" id="textarea-rtl-hebrew" rows="3" placeholder="כתוב כאן את ההודעה שלך." aria-describedby="textarea-rtl-hebrew-help"></textarea>
      <div class="field-description form-text" id="textarea-rtl-hebrew-help">כתוב הערה ברורה כדי שצוות התמיכה יוכל לפעול מהר.</div>
    </div>
  </div>
</div>
Write a clear note so support can act on it quickly.
<div dir="ltr">
  <div class="field-group">
    <div class="field">
      <label class="form-label" for="textarea-rtl-english">Message</label>
      <textarea class="form-control" id="textarea-rtl-english" rows="3" placeholder="Type your message here." aria-describedby="textarea-rtl-english-help"></textarea>
      <div class="field-description form-text" id="textarea-rtl-english-help">Write a clear note so support can act on it quickly.</div>
    </div>
  </div>
</div>

Component reference

Status
Accepted
Runtime
native HTML/CSS
Markup
Bootstrap/native HTML
Reference

For more form control options, see the Bootstrap Form controls documentation.

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.