Textarea with Character Counter

<div class="counter-textarea-wrap">

  <label for="message-box">
    Message
  </label>

  <textarea
    id="message-box"
    maxlength="120"
    placeholder="Write your message..."
    data-counter-textarea
  ></textarea>

  <div class="character-counter">
    <span data-character-count>0</span>/120
  </div>

</div>

.counter-textarea-wrap{
  width:100%;
  max-width:520px;
}

.counter-textarea-wrap label{
  display:block;
  margin-bottom:9px;

  color:#aab4c8;
  font-size:13px;
  font-weight:600;
}

.counter-textarea-wrap textarea{
  width:100%;
  min-height:150px;

  padding:15px 16px;

  border:1px solid #263750;
  border-radius:10px;
  outline:none;

  resize:vertical;

  background:#0b1423;
  color:#ffffff;

  font-size:16px;
  line-height:1.6;

  transition:.25s ease;
}

.counter-textarea-wrap textarea::placeholder{
  color:#65748b;
}

.counter-textarea-wrap textarea:focus{
  border-color:#22d3ee;

  box-shadow:
    0 0 0 3px rgba(34,211,238,.10);
}

.character-counter{
  margin-top:8px;

  text-align:right;

  color:#65748b;
  font-size:12px;
  font-weight:600;
}

const textarea = document.querySelector('[data-counter-textarea]');
const counter = document.querySelector('[data-character-count]');

textarea.addEventListener('input', function() {
  counter.textContent = textarea.value.length;
});

How This Textarea with Character Counter Works

This Textarea with Character Counter combines a standard HTML <textarea> with a small JavaScript counter that updates as the user types. The component gives users a clear 120-character limit while showing the current number of characters underneath the field.

The HTML starts with a .counter-textarea-wrap container. It holds a label, the textarea itself, and a .character-counter element. The label uses for="message-box", matching the textarea’s id="message-box". This connects the “Message” label directly to the text field.

The textarea includes maxlength="120", so the browser enforces the maximum length instead of relying on JavaScript to stop additional input. The counter starts with 0/120, where the first number is placed inside a span marked with data-character-count. JavaScript only needs to update this span while the /120 portion remains unchanged.

CSS limits the overall wrapper to max-width: 520px while allowing it to use 100% of the available width on smaller containers. The textarea also uses width: 100% and has a minimum height of 150px, providing enough room for a multi-line message.

The field has 15px vertical and 16px horizontal padding, a 1px #263750 border, and 10px rounded corners. Its dark #0b1423 background is paired with white input text. The placeholder uses the more muted #65748b color so it remains visually separate from text entered by the user.

The textarea uses resize: vertical. This allows users to increase or decrease its height without resizing it horizontally and potentially disrupting the surrounding layout. Text inside the field uses a 16px font size and line-height: 1.6.

When the textarea receives focus, its border changes to cyan #22d3ee. A three-pixel cyan-tinted box-shadow is also applied around the field. The .25s ease transition smooths the change between the normal and focused states.

The character counter appears eight pixels below the textarea and is aligned to the right with text-align: right. Its 12px text and muted #65748b color keep the count visible without competing heavily with the message itself.

JavaScript provides the live counting behavior. It selects the textarea through [data-counter-textarea] and the number through [data-character-count]. An input event listener runs whenever the textarea’s value changes.

Inside the listener, textarea.value.length calculates the current number of characters, and that number is assigned to counter.textContent. Because the code listens for the input event, the displayed count responds to changes in the field as the value is edited. For additional details about this event, see the MDN input event documentation.

The JavaScript does not calculate how many characters remain, change colors near the limit, or display an error. Its only job is to show the current length, while the native maxlength attribute enforces the 120-character maximum.

Customizing the Textarea with Character Counter

The component contains several practical values that can be changed to fit different message fields and form layouts.

• Change maxlength="120" and the visible /120 text together to use a different character limit.
• Adjust the wrapper’s max-width: 520px to make the component narrower or wider.
• Change min-height: 150px to control the textarea’s initial vertical size.
• Edit the 15px 16px padding or 10px border radius to change the field’s proportions.
• Replace #0b1423 to use a different textarea background.
• Change #22d3ee to customize the focused border and focus-ring color.
• Edit resize: vertical if different textarea resizing behavior is required.
• Replace “Message” and “Write your message…” to adapt the field to comments, feedback, descriptions, or other text input.

Where to Use This Textarea with Character Counter

A visible counter is useful when users need to enter multi-line text within a clearly defined length limit.

• Contact form message fields
• Short feedback forms
• Product review summaries
• Profile bio fields
• Support ticket descriptions
• Comment forms
• Short application responses

For a more complete form containing name, email, message, and submission feedback, the Contact Form is a related CodeRipple component. This counter can handle the visible text length, but any submission, storage, or server-side validation would need to be implemented separately.

Frequently Asked Questions

What is the maximum number of characters users can enter?

The textarea has maxlength="120", so the browser limits its value to 120 characters. The displayed counter also uses 120 as its visible maximum.

How does the character counter update?

JavaScript listens for the textarea’s input event. Each time the value changes, textarea.value.length is assigned to the counter’s textContent.

Does JavaScript enforce the 120-character limit?

No. The JavaScript only displays the current character count. The actual limit comes from the native HTML maxlength="120" attribute.

Can users resize the textarea?

Yes. The CSS uses resize: vertical, allowing the textarea’s height to be adjusted while keeping its horizontal width fixed to the container.

This Textarea with Character Counter uses native HTML for the input limit, CSS for the field and focus styling, and a short JavaScript listener to keep the displayed character count synchronized with the current value.