Character Count

formUSWDS-derivedinteractive

Attaches to a textarea or text input and shows remaining characters.

Variants

Default Character Count

Message100 characters allowed

<flex-character-count data-maxlength="100">
  <label class="flex-label" for="message">Message</label>
  <textarea class="flex-textarea" id="message" name="message" maxlength="100" aria-describedby="message-message">
  </textarea>
  <span class="flex-character-count__message" id="message-message" aria-live="polite">100 characters allowed</span>
</flex-character-count>

Required Character Count

Short bio200 characters allowed

<flex-character-count data-maxlength="200">
  <label class="flex-label" for="bio">Short bio</label>
  <textarea class="flex-textarea" id="bio" name="bio" maxlength="200" required="" aria-describedby="bio-message">
  </textarea>
  <span class="flex-character-count__message" id="bio-message" aria-live="polite">200 characters allowed</span>
</flex-character-count>

Contract

Class mapping

USWDS	Flex	Notes
`usa-character-count`	`<flex-character-count> (custom element)`	Container element with data-maxlength attribute
`usa-character-count__status`	`.flex-character-count__message`	Remaining/over-limit message element
`usa-character-count__status--invalid`	`[data-state="error"]`	Over-limit error state

Verified properties

font-sizefont-weightdisplaypadding-top

Intentional differences

color: ours = var(--flex-color-error), USWDS = #b50909

We use our error design token (red-warm-vivid-50) for consistency; USWDS uses a hardcoded red-vivid-60

Behavior promises

✓ Initial message shows total characters allowed
✓ Typing updates remaining count
✓ Over-limit shows error state with count over

Source CSS

/* flex-character-count — USWDS Character Count conformance
   Provides live feedback on remaining/exceeded character limit */

flex-character-count {
  display: block;
}

.flex-character-count__message {
  display: inline-block;
  padding-block-start: 0.25rem;
  font-size: 1rem;
  color: var(--flex-color-text);
  line-height: 1.3;

  &[data-state="error"] {
    color: var(--flex-color-error);
    font-weight: 700;
  }
}