HTML + CSSInputs
Textarea with limit bar
A bar under the text fills as you type and turns red when you get close to the limit.
Settings
16px
1x
Code
<label class="uv-in2n"><textarea maxlength="80" rows="3" placeholder="Write your bio"></textarea><div class="ft"><span class="bar"><i></i></span><b class="ct">0/80</b></div></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 helps wherever space is tight: the bio on a profile page, the message on a gift card, a short review or the text of an SMS campaign. The bar shows how much room is left, and turns red before you hit the wall. A textarea with a character limit, in HTML, CSS and a bit of JavaScript.
The demo allows 80 characters and warns at 68. If you change the limit, update the counter too, and give the warning some margin so people can finish their sentence calmly.