<div class="bx--form-item">
  <label for="text-area-2" class="bx--label">Text Area label</label>
  <textarea id="text-area-2" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
</div>

<div class="bx--form-item">
  <label for="text-area-3" class="bx--label">Text Area label</label>
  <textarea data-invalid id="text-area-3" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
  <div class="bx--form-requirement">
    Validation message here
  </div>
</div>

<div class="bx--form-item">
  <label for="text-area-4" class="bx--label">Text Area label</label>
  <textarea id="text-area-4" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
  <div class="bx--form__helper-text">
    Optional helper text goes here
  </div>
</div>
