Character counter textarea
A text box with a progress bar that fills as you type and turns orange, then red, near the limit.
Settings
Code
<label class="uv-ic"><textarea maxlength="60" placeholder="Tell us something"></textarea><span><i></i><b>0/60</b></span></label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
Where to use it
A character counter shows how much room is left before people hit the limit. It suits the bio of a profile page, the title of a product review or a note to a restaurant with a booking. The bar fills as you type, turns orange at 80% and red at the limit, next to a live count.
The demo stops at 60 characters; change the limit in the HTML to match your own rule. It runs on a few lines of JavaScript. Show the counter only where a limit really exists. On a normal comment box, a bar that nobody will ever fill just adds noise.