<form-maxlength-progress>

The description template supplies both the empty-field text and a native-hidden static description associated through aria-describedby. The changing generated counter is hidden from assistive technology to avoid duplicate and per-keystroke description announcements. The generated [data-form-maxlength-progress-generated-counter] element remains in Light DOM as a supported styling hook.

<textarea id="message" maxlength="120"></textarea>
<form-maxlength-progress
  for="message"
  description="Write up to {maxlength} characters"
>
</form-maxlength-progress>

These fields exercise real browser input paths rather than buttons that imitate them. Copy the sample into the first field. Use saved address data in the second field to check browser autofill.

The host references unique Light DOM descendants using counter and progress.

<form-maxlength-progress
  for="summary"
  counter="summary-count"
  progress="summary-meter"
  proximity-values="safe 0%, warning 60%, target 100%"
>
  <span><strong id="summary-count"></strong> left</span>
  <progress id="summary-meter"></progress>
</form-maxlength-progress>

The component inherits lang for plural selection. Translate the description, remaining and overrun labels, and reached/exceeded alerts together. Overrun removes native enforcement and sets aria-invalid="true" until the value returns within the limit.

<div lang="fr">
  <label for="short-note">Note courte</label>
  <textarea id="short-note" maxlength="40"></textarea>
  <form-maxlength-progress
    for="short-note"
    overrun="true"
    description="{maxlength} caractères maximum"
    label="{remaining} caractères restants"
    label-one="{remaining} caractère restant"
    overrun-label="{remaining} caractères en trop"
    overrun-label-one="{remaining} caractère en trop"
    limit-reached-label="Limite de caractères atteinte"
    limit-exceeded-label="Limite de caractères dépassée"
  ></form-maxlength-progress>
</div>

Listen for form-maxlength-progress:notification to respond when the field nears, reaches, or exceeds its limit. The event’s detail includes its milestone state, message, priority, remaining count, maximum, and associated field.

document
  .querySelector('#event-progress')
  .addEventListener(
    'form-maxlength-progress:notification',
    (event) => {
      console.log(event.detail);
    }
  );

Waiting for a notification milestone…