<form class="usa-form">
  <div class="usa-character-count">
    <div class="usa-form-group">
      <label class="usa-label" for="with-hint-input">Text input</label>
      <span id="with-hint-input-hint" class="usa-hint">This is an input with a character counter.</span>
      <input
        class="usa-input usa-character-count__field"
        id="with-hint-input"
        maxlength="25"
        name="with-hint-input"
        aria-describedby="with-hint-input-info with-hint-input-hint"
        {% if disabled_state == 'disabled' %} disabled {%- endif %}
        {% if disabled_state == 'aria-disabled' %} aria-disabled="true" {%- endif %}
      >
    </div>
    <span id="with-hint-input-info" class="usa-character-count__message">You can enter up to 25 characters</span>
  </div>
</form>

<form class="usa-form">
  <div class="usa-character-count">
    <div class="usa-form-group">
      <label class="usa-label" for="with-hint-textarea">Textarea</label>
      <span id="with-hint-textarea-hint" class="usa-hint">This is a textarea with a character counter.</span>
      <textarea
        class="usa-textarea usa-character-count__field"
        id="with-hint-textarea"
        maxlength="50"
        name="with-hint-textarea"
        rows="5"
        aria-describedby="with-hint-textarea-info with-hint-textarea-hint"
        {% if disabled_state == 'disabled' %} disabled {%- endif %}
        {% if disabled_state == 'aria-disabled' %} aria-disabled="true" {%- endif %}
        ></textarea>
    </div>
    <span id="with-hint-textarea-info" class="usa-character-count__message">You can enter up to 50 characters</span>
  </div>
</form>
