Forms
Textarea
Style multi-line textareas with labels, helper text, sizing rows, read-only and disabled states, and validation feedback.
Forms
Textarea
The .bs-textarea class styles multi-line input fields with matching focus rings, high-contrast borders, placeholder styling, and responsive layout.
Basic textarea
Markdown formatting is supported. Max 500 characters.
HTML · Basic textarea
<div class="bs-form-group">
<label class="bs-label" for="bio">Bio</label>
<textarea
class="bs-textarea"
id="bio"
name="bio"
rows="4"
placeholder="Share a few sentences about your background, experience, or current projects..."
aria-describedby="bio-help"
></textarea>
<span class="bs-form-text" id="bio-help">
Markdown formatting is supported. Max 500 characters.
</span>
</div>Textarea rows and sizing
HTML · Textarea rows and sizing
<!-- Compact 2-row textarea -->
<div class="bs-form-group">
<label class="bs-label" for="summary">Summary (2 rows)</label>
<textarea class="bs-textarea" id="summary" name="summary" rows="2" placeholder="Brief summary..."></textarea>
</div>
<!-- Expanded 6-row textarea -->
<div class="bs-form-group">
<label class="bs-label" for="details">Detailed reproduction steps (6 rows)</label>
<textarea class="bs-textarea" id="details" name="details" rows="6" placeholder="Steps to reproduce..."></textarea>
</div>Flush textarea
HTML · Flush textarea
<div class="bs-form-group">
<label class="bs-label" for="notes">Quick note</label>
<textarea class="bs-textarea bs-input-flush" id="notes" name="notes" rows="3" placeholder="Borderless embedded notes..."></textarea>
</div>Readonly and disabled states
HTML · Readonly and disabled textarea
<!-- Readonly textarea -->
<div class="bs-form-group">
<label class="bs-label" for="public-key">Public SSH key (Readonly)</label>
<textarea class="bs-textarea" id="public-key" readonly rows="3">ssh-ed25519 AAAAC3...</textarea>
</div>
<!-- Disabled textarea -->
<div class="bs-form-group">
<label class="bs-label" for="archived-notes">Archived project notes (Disabled)</label>
<textarea class="bs-textarea" id="archived-notes" disabled rows="2">This repository is archived.</textarea>
</div>Valid state
Description meets the minimum length requirement.
HTML · Valid textarea
<div class="bs-form-group">
<label class="bs-label" for="description">Project description</label>
<textarea
class="bs-textarea bs-is-valid"
id="description"
name="description"
rows="3"
aria-invalid="false"
aria-describedby="desc-feedback"
>Boobstrap is a CSS-first design system...</textarea>
<span class="bs-form-feedback bs-form-feedback-valid" id="desc-feedback">
Description meets the minimum length requirement.
</span>
</div>Invalid state
Apply aria-invalid="true" or .bs-is-invalid when validation fails. The textarea renders with a danger border and focus ring, and .bs-form-feedback-invalid presents the error message.
Root cause summary is required for high-severity incidents.
HTML · Invalid textarea
<div class="bs-form-group">
<label class="bs-label" for="post-mortem">
Incident post-mortem <span class="bs-label-required" aria-hidden="true">*</span>
</label>
<textarea
class="bs-textarea"
id="post-mortem"
name="post_mortem"
rows="3"
aria-invalid="true"
aria-describedby="pm-error"
required
></textarea>
<span class="bs-form-feedback bs-form-feedback-invalid" id="pm-error">
Root cause summary is required for high-severity incidents.
</span>
</div>Explicit rows attribute
Always specify an explicit rows attribute to define a predictable initial height for varying screen sizes.
Vertical resizing
Textareas preserve native vertical resizing while constraining horizontal overflow within container bounds.
Textarea API
Textarea classes format multi-line text boxes, label association, helper text, and error validation feedback.
| Class | Purpose |
|---|---|
.bs-textarea | Base multi-line input styling with normalized line height, theme border, and vertical resizing. |
.bs-input-flush | Removes outer border and padding for embedding inside comment boxes and chat windows. |
.bs-is-valid | Explicit positive validation state with green border, focus ring, and icon accent. |
.bs-is-invalid | Explicit negative validation state with danger border, focus ring, and icon accent. |
.bs-form-group | Vertical grid grouping textarea with label, character counts, and error feedback. |
.bs-label | Associated label text for the textarea. |
.bs-form-text | Helper text or live character counter positioned below the textarea. |
.bs-form-feedback-valid | Success message text associated with valid textarea input. |
.bs-form-feedback-invalid | Error message text describing character count violations or required input errors. |