webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Cascading Select

Fuse.js Typo-Tolerant Product Search with Threshold Tuning

Bootstrap Paste-to-Upload (Clipboard Image Paste)

Bootstrap Multi-File Upload Queue

Avatar Upload

Chip Filter

Circular Char Counter — Ring Character Counter Textarea

Circular Char Counter · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsSVGForms & Validation

Copy & paste

Source Code

<div class="cc-card">
  <label class="cc-label" for="ccText">What's happening?</label>
  <textarea id="ccText" class="cc-text" placeholder="Share an update…" rows="4" maxlength="320"></textarea>
  <div class="cc-foot">
    <div class="cc-ring" id="ccRing">
      <svg viewBox="0 0 36 36" aria-hidden="true">
        <circle class="cc-track" cx="18" cy="18" r="15.9"/>
        <circle class="cc-fill" id="ccFill" cx="18" cy="18" r="15.9"/>
      </svg>
      <span class="cc-num" id="ccNum"></span>
    </div>
    <button class="cc-send" id="ccSend" type="button" disabled>Post</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

SVG progress ring
stroke-dashoffset fills the ring as the text grows.
Soft limit
Type past the limit without losing characters; posting is blocked.
Color thresholds
Blue normally, amber near the limit, red when over.
Progressive count
The number appears only within 20 characters of the limit.
Submit gating
Post disables when empty or over the limit.
Smooth transitions
Each keystroke animates the ring and color.
Accessible label
A real label and a safety-net maxlength on the textarea.
No library
Pure HTML/CSS/JS/SVG — no counter dependency.

About this UI Snippet

Circular Char Counter — Progress-Ring Character Count with Soft Limit

Screenshot of the Circular Char Counter snippet rendered live

A circular character counter shows how much of a length limit a user has used as a filling progress ring, turning amber as they near the limit and red when they pass it — the compact pattern popularised by Twitter/X. This snippet builds it on a textarea with an SVG ring, a soft limit, and submit gating, in plain HTML, CSS, and vanilla JavaScript.

An SVG ring driven by stroke-dashoffset

The ring is two overlapping SVG circles: a grey track and a coloured fill. The fill's stroke-dasharray is set to its circumference and its stroke-dashoffset is animated from full (empty) to zero (complete) as the text grows — the same technique behind every circular progress indicator. The SVG is rotated −90° so the ring starts filling from the top, and a CSS transition makes each keystroke's change smooth.

A soft limit that doesn't lose text

Rather than a hard maxlength that silently swallows keystrokes at the limit, this counter uses a soft limit: you can keep typing past it (up to a generous hard cap), the ring goes red, the remaining count goes negative, and the Post button disables. This is friendlier — users can paste a slightly-too-long draft and trim it down rather than having characters vanish as they type.

Progressive disclosure of the number

When you're well under the limit the ring shows no number — just a calm progress fill. Only when you get within 20 characters does the exact remaining count appear inside the ring, and it turns red once negative. Showing the number only when it matters keeps the UI quiet during normal typing and draws attention exactly when the user needs it.

Submit gating

The Post button is disabled when the field is empty or over the limit, so the counter does double duty as a validity indicator. Because the gating is derived from the same remaining value that colours the ring, the visual state and the button state can never disagree.

Accessible and portable

The textarea keeps a hard maxlength as a final safety net and a real label, and the ring is marked aria-hidden since the meaningful state (button enabled/disabled, the textarea itself) is conveyed without it. The whole counter is a single update() function with no dependencies — a clean reference for the ring-counter pattern you'll want on any composer or bio field.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA textarea renders with a circular counter and a Post button.
  2. 2
    Type a messageThe ring fills as you type toward the limit.
  3. 3
    Approach the limitWithin 20 characters the remaining count appears and the ring turns amber.
  4. 4
    Go overThe ring and count turn red and Post disables, but your text stays.
  5. 5
    Set your limitChange the MAX constant to your character budget.
  6. 6
    Wire PostReplace the click handler with your real submit.

Real-world uses

Common Use Cases

Social post composers
Limit a post box like an AI chat interface message field, with a ring that fills as text is typed.
Profile bio fields
Cap a biography inside a settings panel, turning amber near the limit and red once it is passed.
Comment boxes
Show remaining length in a comment thread, with the number appearing only within 20 characters of the limit.
SMS and notification text
Keep messages within a strict length, using a soft limit that lets people type past it without losing text while blocking the send.
Review and SVG ring learning
Pair with a review form for concise feedback, and learn ring fills from stroke-dashoffset as a reusable technique.
Related: Conditional Branching Form Fields — Show Only What Applies
See the Conditional Branching Form Fields — Show Only What Applies for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The colored circle has its stroke-dasharray set to the full circumference, and its stroke-dashoffset is moved from the full length (empty ring) toward zero (full ring) in proportion to characters used. The SVG is rotated −90° so it fills from the top, and a CSS transition on stroke-dashoffset smooths each keystroke.

A hard maxlength silently stops accepting input at the cap, which is frustrating when you paste a slightly long draft — characters just vanish. A soft limit lets you go over (the ring turns red and Post disables) so you can see the overage and trim it down. A high hard maxlength still acts as a final safety net against pathological input.

Showing a live count during normal typing is visual noise — most of the time the user is nowhere near the limit. Revealing the exact remaining number only within the last 20 characters keeps the interface calm and draws attention precisely when it becomes useful, which is the behaviour the Twitter/X composer popularised.

Edit the MAX constant — it drives the ring fill percentage, the warning threshold, the remaining count, and the submit gating, so everything stays consistent. You can also adjust the "within 20" warning window by changing the comparison in the update function.

Bind the textarea value to state and compute remaining, the ring offset, and the color class as derived values on each change. Render the SVG with the computed stroke-dashoffset and toggle the warn/over classes from state. Gate the submit button on the same derived values. Tailwind users swap the classes for utilities; the ring math is unchanged.