Bootstrap 6 Textarea

Textarea

Style a multi-line text field with the same class as any other form control, and size it by rows rather than by CSS.

Available in Other JavaScript Frameworks

CoreUI Bootstrap 6 Textarea is also available for Angular, React, and Vue. Explore framework-specific implementations below:

On this page

Example

A textarea takes the same .form-control class as an input — it needs no class of its own. Set its height with the rows attribute rather than CSS, so the field grows in whole lines and stays legible at any font size.

Example textarea

Taller textarea

html

<div class="form-field">
  <label for="exampleTextarea" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleTextarea"></textarea>
</div>
<div class="form-field">
  <label for="exampleTextareaRows" class="form-label">Taller textarea</label>
  <textarea class="form-control" id="exampleTextareaRows" rows="4"></textarea>
</div>

Sizing

.form-control-sm and .form-control-lg change the padding and font size, the same as on an input. rows still decides the height.

html

<textarea class="form-control form-control-sm" aria-label="Small textarea" rows="2"></textarea>
<textarea class="form-control" aria-label="Default textarea" rows="2"></textarea>
<textarea class="form-control form-control-lg" aria-label="Large textarea" rows="2"></textarea>

Disabled

Disabled textarea

html

<div class="form-field">
  <label for="disabledTextarea" class="form-label">Disabled textarea</label>
  <textarea class="form-control" id="disabledTextarea" rows="3" disabled></textarea>
</div>

Readonly

Readonly textarea

Text the reader can select and copy, but not change.

html

<div class="form-field">
  <label for="readonlyTextarea" class="form-label">Readonly textarea</label>
  <textarea class="form-control" id="readonlyTextarea" rows="3" readonly>Text the reader can select and copy, but not change.</textarea>
</div>

With form field

Wrap the control in .form-field to lay it out with its label and description, and to get validation feedback in the right place.

Message Tell us what happened, in as much detail as you can.

html

<div class="form-field">
  <label for="textareaField" class="form-label">Message</label>
  <textarea class="form-control" id="textareaField" rows="3"></textarea>
  <small class="form-text">Tell us what happened, in as much detail as you can.</small>
</div>

Customizing

A textarea reads the form control tokens — it declares none of its own.