HTML + CSSInputs
Texto con barra de límite
Una barra bajo el texto se llena al escribir y se pone roja cuando te acercas al límite.
Ajustes
16px
1x
Código
<label class="uv-in2n"><textarea maxlength="80" rows="3" placeholder="Escribe tu bio"></textarea><div class="ft"><span class="bar"><i></i></span><b class="ct">0/80</b></div></label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Dónde usarlo
Un contador de caracteres ayuda allí donde el espacio es justo: la bio de un perfil, la dedicatoria de una tarjeta regalo, una reseña corta o el texto de una campaña de SMS. La barra enseña cuánto queda y se pone roja antes del tope. Un textarea con límite de caracteres en HTML, CSS y algo de JavaScript.
La demo permite 80 caracteres y avisa a los 68. Si cambias el límite, cámbialo también en el contador, y deja margen en el aviso para que la gente termine la frase con calma.