Textarea

Default

<!-- textarea -->
<form class="ui-form">
  <div class="ui-form__group">
    <label>
      <div class="ui-form__label">...</div>
      <div class="ui-form__sublabel">...</div>
      <div class="ui-form__textarea-wrapper">
        <textarea class="ui-textarea" placeholder="...">...</textarea>
      </div>
    </label>
  </div>
</form>

<!-- textarea with error -->
<form class="ui-form">

  <!-- if there is an error, dynamically (JS) add/remove the error modifier class "ui-form__group--error" here -->
  <div class="ui-form__group ui-form__group--error">
    <label>
      <div class="ui-form__label">...</div>
      <div class="ui-form__sublabel">...</div>
      <div class="ui-form__textarea-wrapper">
        <textarea class="ui-textarea" placeholder="...">...</textarea>
      </div>

      <!-- warning/error message -->
      <!-- this can be left empty or have text pre-populated (even if error is not currently active) -->
      <!-- this element is ONLY displayed if the error modifier class is present (see above) -->
      <div class="ui-form__message">...</div>
    </label>
  </div>
</form>

Textarea with Counter

<!-- textarea with counter -->
<form class="ui-form">
  <div class="ui-form__group">
    <label>
      <div class="ui-form__label">...</div>
      <div class="ui-form__sublabel">...</div>
      <div class="ui-form__textarea-wrapper">

        <!-- extra modifier class when counter required -->
        <!-- the HTML marlup and logic for character count is handled by Javascript -->
        <textarea class="ui-textarea ui-textarea--has-counter" placeholder="..." maxlength="200">...</textarea>
      </div>
    </label>
  </div>
</form>

Textarea with File Download

<!-- textarea with file download -->
<form class="ui-form">

  <!-- this component consist of 2 adjacent "ui-form--group" with extra modifier classes -->
  <!-- the textarea and file attachment have their own separate error state (see below) -->

  <!-- the textarea group -->
  <!-- adding the error class "ui-form__group--error" here would show the error message and make the border red -->
  <div class="ui-form__group ui-form__group--nested-textarea">
    <label>
      <div class="ui-form__label">...</div>
      <div class="ui-form__sublabel">...</div>
      <div class="ui-form__textarea-wrapper">
        <textarea class="ui-textarea" placeholder="..."></textarea>
      </div>
    </label>

    <!-- exceptionally for this component, the error message IS NOT added here (as it would for a normal textarea) -->
    <!-- see below -->
  </div>

  <!-- the file attachment group -->
  <!-- adding the error class "ui-form__group--error" here would show the file attachment error message -->
  <div class="ui-form__group ui-form__group--nested-file">
    <label>
      <div class="ui-form__file-wrapper">
        <div class="ui-file">
          <input type="file">
          <div class="ui-file__label">...</div>
          <div class="ui-file__cta">...<i class="ui-icon ui-icon--attachment ui-icon--primary"></i></div>
        </div>
        <ul class="ui-cloud">
          <li class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></li>
        </ul>
      </div>
      <div class="ui-form__message">...</div>
    </label>
  </div>

  <!-- because the file download component sits between the textarea and the textarea error message, -->
  <!-- the textarea error MUST be placed here, below the 2 components -->
  <div class="ui-form__message">...</div>
</form>

Textarea with Counter and File Download

<!-- textarea with counter and file download -->
<form class="ui-form">

  <div class="ui-form__group ui-form__group--nested-textarea">
    <label>
      <div class="ui-form__label">...</div>
      <div class="ui-form__sublabel">...</div>
      <div class="ui-form__textarea-wrapper">
        <textarea class="ui-textarea ui-textarea--has-counter" placeholder="..." maxlength="200"></textarea>
      </div>
    </label>
  </div>

  <div class="ui-form__group ui-form__group--nested-file">
    <label>
      <div class="ui-form__file-wrapper">
        <div class="ui-file">
          <input type="file">
          <div class="ui-file__label">...</div>
          <div class="ui-file__cta">...<i class="ui-icon ui-icon--attachment ui-icon--primary"></i></div>
        </div>
        <ul class="ui-cloud">
          <li class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></li>
        </ul>
      </div>

      <!-- error message for file attachment -->
      <div class="ui-form__message">...</div>
    </label>
  </div>

  <!-- error message for textarea -->
  <div class="ui-form__message">...</div>
</form>