<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.

package:
  name: metro-digital-design-system-demo
  version: 0.1.0
uswds:
  path: ../../../dist
placeholderLink: javascript:void()