Text area

A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.

Stacked layout

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts.

Label (Required) Help or instructional text goes here

Horizontal layout

Side labels are most useful when vertical space is limited.

HTML
Twirl

<div class="form-group row">
  <div class="col-sm-3 col-md-2 d-md-flex text-md-right flex-column align-items-end">
    <label class="col-form-label" for="textarea">…</label>
    <span class="help-inline">(Required)</span>
  </div>
  <div class="col-sm-9 col-md-10 input-width--md">
    <textarea id="textarea" placeholder="Placeholder" rows="2" class="form-control"></textarea>
    <!-- error handling -->
    <div class="form-error" role="alert">…</div>
    <!-- /error handling -->
    <span class="help-block">
      <span class="help-block__text"> … </span>
      <!-- optional warning message -->
      <div class="text-warning d-flex align-items-center space-x space-x-3">
        <svg class="icon icon-16" aria-hidden="true">
          <use xlink:href="/assets/svg/solid.svg#bell-on"></use>
        </svg>
        …
      </div>
      <!-- /optional warning message -->
    </span>
  </div>
</div>

@standardTextArea(myForm(""),
  …
)

(See Twirl for stacked layouts)

Design resources

View component in Figma