Error states

<form class="usa-form">
  <div class="usa-form-group usa-form-group--error">
    <label class="usa-label usa-label--error" for="input-error">
      Text input label
      <abbr title="required" class="usa-label--required">*</abbr>
    </label>
    <span id="with-hint-input-hint" class="usa-hint"> Helper text </span>

    <div class="usa-character-count">
      <input
        required
        class="usa-input usa-input--error usa-character-count__field"
        id="input-error"
        maxlength="25"
        name="input-error"
        type="text"
        aria-describedby="with-hint-input-hint input-error-message"
      />
      <span id="with-hint-input-info" class="usa-character-count__message">
        You can enter up to 25 characters
      </span>
    </div>
    <div class="nj-error-message-container">
      <svg
        class="usa-icon margin-right-1"
        focusable="false"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="{{ uswds.path }}/img/sprite.svg#info"></use>
      </svg>
      <span class="usa-error-message" id="input-error-message" role="alert"
        >Helpful error message</span
      >
    </div>
  </div>

  <div class="usa-form-group usa-form-group--error">
    <label class="usa-label usa-label--error" for="area-error">
      Text area label
      <abbr title="required" class="usa-label--required">*</abbr>
    </label>
    <span id="with-hint-area-hint" class="usa-hint"> Helper text </span>

    <div class="usa-character-count">
      <textarea
        required
        class="usa-textarea usa-input--error usa-character-count__field"
        id="area-error"
        maxlength="25"
        name="area-error"
        type="text"
        aria-describedby="with-hint-area-hint area-error-message"
      ></textarea>
      <span id="with-hint-area-info" class="usa-character-count__message">
        You can enter up to 25 characters
      </span>
    </div>
    <div class="nj-error-message-container">
      <svg
        class="usa-icon margin-right-1"
        focusable="false"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="{{ uswds.path }}/img/sprite.svg#info"></use>
      </svg>
      <span class="usa-error-message" id="area-error-message" role="alert"
        >Helpful error message</span
      >
    </div>
  </div>
</form>