Character Count

Help users know how much text they can enter when there is a limit on the number of characters.

Default Character Count

<div class="form-group">
  <label class="form-label" for="description">Describe your issue</label>
  <span class="form-hint">Enter up to 500 characters</span>
  <textarea class="form-textarea" id="description" rows="5" maxlength="500"></textarea>
  <div class="character-count">
    You have <strong>500</strong> characters remaining
  </div>
</div>

Approaching Limit

Change the message colour when users approach the limit (e.g., under 50 characters).

<div class="character-count character-count-warning">
  You have <strong>25</strong> characters remaining
</div>

Over Limit

Show an error state when users exceed the limit.

<div class="character-count character-count-error">
  You have <strong>15</strong> characters too many
</div>

Word Count

For longer content, you might count words instead of characters.

JavaScript Implementation

function updateCharacterCount(textarea, countDisplay, maxLength) {
  const remaining = maxLength - textarea.value.length;
  const countEl = countDisplay.querySelector('strong');

  countEl.textContent = Math.abs(remaining);

  // Remove existing states
  countDisplay.classList.remove('character-count-warning', 'character-count-error');

  if (remaining < 0) {
    countDisplay.classList.add('character-count-error');
    countDisplay.innerHTML = `You have <strong>${Math.abs(remaining)}</strong> characters too many`;
  } else if (remaining < 50) {
    countDisplay.classList.add('character-count-warning');
    countDisplay.innerHTML = `You have <strong>${remaining}</strong> characters remaining`;
  } else {
    countDisplay.innerHTML = `You have <strong>${remaining}</strong> characters remaining`;
  }
}

// Usage
const textarea = document.getElementById('description');
const countDisplay = document.querySelector('.character-count');
textarea.addEventListener('input', () => {
  updateCharacterCount(textarea, countDisplay, 500);
});

When to Use

Use character count when:

• There is a hard limit on characters (database, SMS, etc.)
• You want to encourage concise responses
• The limit affects how data is processed or displayed

Don't use character count when:

• There is no real limit on input length
• The limit is very high and unlikely to be reached
• It would add unnecessary cognitive load

Accessibility

• Use aria-live="polite" to announce changes to screen readers
• Don't announce every keystroke - debounce announcements
• Use aria-describedby to associate the count with the textarea
• Ensure colour is not the only indicator of state

CSS Classes

.character-count { }
.character-count-warning { }
.character-count-error { }