<form-maxlength-progress> Web Component Demo

Default counter

The component creates a numeric counter and associates it with the field through aria-describedby. 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">
</form-maxlength-progress>

Message

Authored counter and progress

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>

Summary

left

Localized overrun

Overrun removes native enforcement while the component is active. The visible count can become negative while the accessible label describes the positive amount over. The field receives aria-invalid="true" until its value returns within the limit.

<form-maxlength-progress
  for="short-note"
  overrun="true"
  label="{remaining} characters available"
  label-one="{remaining} character available"
  overrun-label="{remaining} characters too many"
  overrun-label-one="{remaining} character too many"
></form-maxlength-progress>

Short note