Character count

A textarea with a limit. People see how much room is left, and screen readers hear it once they pause typing.

When to use

When a textarea has a hard limit that the service enforces. If there is no real limit, do not invent one.

<div class="ag-field ag-mb-0" data-ag-char-count>
  <label class="ag-label" for="cc-notes">Why are you applying?</label>
  <span class="ag-hint" id="cc-notes-hint">You can enter up to 200 characters</span>
  <textarea
    class="ag-textarea"
    id="cc-notes"
    name="reason"
    rows="4"
    data-ag-max="200"
    aria-describedby="cc-notes-hint cc-notes-count"
  ></textarea>
  <span class="ag-char-count__message" id="cc-notes-count"></span>
</div>

How it works

• The wrapper carries data-ag-char-count, the textarea carries data-ag-max, and the message element sits below with its own id.
• The hint states the limit in words, so the limit is known with JavaScript off.
• Do not add maxlength. It silently stops people typing, and pasted text is cut without warning. Let them go over and show the message; validate on the server.
• The visible message updates on every keystroke. A hidden live region repeats it only after a 500ms pause, so screen readers are not interrupted on every letter.
• Over the limit, the message turns red and bold and the border turns red.