Form with a Character Counter Template

Guide users to write content of a specific length with this real-time character counter.

This template enhances a standard textarea by adding a small counter that updates on every keystroke, perfect for tweets, bios, or any field with a length limit.

Screenshot of a textarea with a character count like '15/140' displayed below it.

Get Source Code → Preview →

About this Character Counter Form

When a user needs to write within a specific length constraint, a live counter is a handy usability feature. This template provides a clean, self-contained component to achieve this.

The functionality is handled by a simple JavaScript snippet:

It identifies the textarea and a span element designated for the counter.
It gets the maximum character limit from the textarea's maxlength attribute.
An event listener is attached to the textarea, which fires on the input event (every keystroke, paste, etc.).
Inside the listener, it gets the current length of the textarea's value and updates the text content of the counter span.
As a bonus, it adds a warning class when the user gets close to the limit and an error class if they hit it.

This provides immediate, helpful feedback and prevents user frustration from having their text cut off unexpectedly.

Features

Live Character Count: Updates instantly as the user types.
Uses maxlength: The limit is set semantically in the HTML on the maxlength attribute.
Visual Cues: The counter text changes color as the user approaches the character limit.
Lightweight JavaScript: The entire effect is achieved with a small, easy-to-understand script.

Dependencies

Uses pure HTML and CSS, with a necessary, self-contained JavaScript block for the functionality.

Code

Here's the full code for the form with a character counter:

<div class="char-counter-container">
    <h3>Compose a Short Bio</h3>
    <form action="#" method="post">
        <div class="form-group">
            <label for="bio-textarea">Your Bio</label>
            <textarea id="bio-textarea" name="bio" maxlength="140" placeholder="Tell us something about yourself..."></textarea>
            
            <div class="char-counter" id="char-counter">0/140</div>
        </div>
        <button type="submit">Save</button>
    </form>
</div>

if (textArea && charCounter) {
    const maxLength = textArea.getAttribute('maxlength');

textArea.addEventListener('input', () => {
        const currentLength = textArea.value.length;
        
        // Update the text
        charCounter.textContent = `${currentLength}/${maxLength}`;

// Update the color based on length
        // e.g., show warning at 90% of the max length
        if (currentLength >= maxLength) {
            charCounter.className = 'char-counter error';
        } else if (currentLength >= maxLength * 0.9) {
            charCounter.className = 'char-counter warning';
        } else {
            charCounter.className = 'char-counter';
        }
    });
}
</script>

View Output