NJ Web Design System (v1.0.0)

Character Count 

<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">
        </div>
        <span id="with-hint-input-info" class="usa-hint usa-character-count__message" aria-live="polite">
            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"></textarea>
        </div>

        <span id="with-hint-textarea-info" class="usa-hint usa-character-count__message" aria-live="polite">
            You can enter up to 50 characters
        </span>
    </div>
</form>

No notes defined.

<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">
    </div>
    <span id="with-hint-input-info" class="usa-hint usa-character-count__message" aria-live="polite">
      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"></textarea>
    </div>

    <span id="with-hint-textarea-info" class="usa-hint usa-character-count__message" aria-live="polite">
      You can enter up to 50 characters
    </span>
  </div>
</form>
 
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist