Forms

Textarea with Character Count

Wrap your <textarea></textarea> in .quanta-textarea-wrapper to get built-in padding, focus styling, and an auto‑updating character‑count badge via .quanta-char-count. Supports dynamic resizing and theming.

Markup

Structure your textarea like this:

<div class="quanta-textarea-wrapper">
  <textarea id="myTextarea" class="quanta-textarea" maxlength="200" placeholder="Type your message..."></textarea>
  <div class="quanta-char-count" data-target="myTextarea">0 / 200</div>
</div>

Behavior

A small snippet of JS (not shown here) should:

• Listen for input events on the textarea.
• Read its value.length and maxlength.
• Update the corresponding .quanta-char-count text.

It gracefully handles dynamic maxlength changes and lets users resize vertically.

Dark Mode

The textarea and badge adapt automatically:

• .quanta-textarea gets transparent background and light text in dark mode.
• .quanta-char-count switches to white text.